您的位置:手机购彩平台 > 手机购彩平台-编程 > 内阴影背景初始位置

内阴影背景初始位置

2019-10-03 20:48

1、背景图片

废话不多说,上代码:

<div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div></div><style> #div1 div{ float:left; width: 200px; height:200px; margin-right:10px; margin-bottom:10px; border:5px dashed #000; padding:10px; background:#eee url(../fd.png) no-repeat; box-sizing: border-box; } #div1 .div1{ background-origin:border-box; } #div1 .div2{ background-origin:content-box; } #div1 .div3{ background-origin:padding-box; } #div1 .div4{ clear: left; background-clip:border-box; } #div1 .div5{ background-clip:content-box; } #div1 .div6{ background-clip:padding-box; } #div1:after{ content: ''; display: table; clear:both; }</style>

效果图如下:

图片 1背景位置

投影:box-shadow: X坐标/ Y坐标/ 模糊/ 扩展/ 颜色/ 内阴影背景初始位置:background-origin:border-box content-box padding-box;背景裁剪:background-clip:border-box content-box padding-box;

2、条纹效果 -> 线性渐变

<div ></div><style> #div3{ width: 200px; height:200px; background:linear-gradient(45deg, #fb3 25%,#58a 0,#58a 50%, #fb3 0,#fb3 75%,#58a 0); background-size:42px 42px; }</style>

图片 2条纹一

3、条纹效果 -> 线性渐变

<div ></div><style> #div4{ width: 200px; height:200px; background:repeating-linear-gradient(45deg, #fb3,#fb3 15px,#58a 0,#58a 30px); }</style>

图片 3条纹二

4、条纹效果 -> 同色系

<div ></div><style> #div5{ width: 200px; height:200px; background:#58a; background-image:repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px); }</style>

图片 4同色系

5、条纹效果 -> 交错斜纹

<div ></div><style> #div6{ width: 200px; height:200px; background:#58a; background-image:repeating-linear-gradient(45deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px), repeating-linear-gradient(-45deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px); }</style>

图片 5斜纹

6、条纹效果 -> 辅助线

<div ></div><style> #div7{ width: 200px; height:200px; background:#58a; background-image: linear-gradient(#aaa 1px,transparent 0), linear-gradient(90deg,#aaa 1px,transparent 0); background-size:30px 30px; }</style>

图片 6辅助线1

7、条纹效果 -> 辅助线

<div ></div><style> #div8{ width: 200px; height:200px; background:#58a; background-image: linear-gradient(white 1px,transparent 0), linear-gradient(90deg,white 1px,transparent 0), linear-gradient(hsla(0,0%,100%,.3)1px, transparent 0), linear-gradient(90deg,hsla(0,0%,100%,.3) 1px, transparent 0); background-size: 75px 75px,75px 75px, 15px 15px,15px 15px; }</style>

图片 7辅助线2

8、点阵图

<div ></div><style> #div9{ width: 200px; height:200px; background:#58a; background-image: linear-gradient(#58a 14px,transparent 0), linear-gradient(90deg,white 1px,transparent 0); background-size:15px 15px,15px 15px; }</style>

图片 8点阵

9、圆点

<div ></div><style> #div10{ width: 200px; height:200px; background: #655; background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0); background-size: 30px 30px; background-position:0 0 ,15px 15px; }</style>

图片 9圆点

10、条纹效果 -> 棋盘

<div ></div><style> #div11{ width: 210px; height:210px; background: #888; background-image: linear-gradient(hsla(0,0%,80%,1) 50%, transparent 0), linear-gradient(90deg,hsla(0,0%,80%,1) 50%, transparent 0); background-size: 20px 20px; background-position:0 0 ,0 0; }</style>

图片 10棋盘

11、点阵图<

div ></div><style> #div12{ width: 210px; height:210px; background:#eee; background-image: linear-gradient(45deg, rgba(0,0,0,.25)25%,transparent 0, transparent 75%,rgba(0,0,0,.25)0), linear-gradient(45deg, rgba(0,0,0,.25)25%,transparent 0, transparent 75%,rgba(0,0,0,.25)0); background-position:0 0,15px 15px; background-size: 30px 30px }</style>

图片 11棋盘

12、条纹效果 -> 随机纹理

<div ></div><style> #div13{ width: 210px; height:210px; background:hsl(20,40%,90%); background-image: linear-gradient(90deg,#fb3 2px,transparent 0), linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px, transparent 0); background-size:23px 100%,41px 100%,61px 100%,83px 100%; }</style>

图片 12随机条纹

备注:这里的大多数例子,都是从LEA VEROU的《css揭秘》这本书上借鉴来的,感兴趣的童鞋不如去买这本书,简直是CSS神书,就和Js的蝴蝶一样,前段必备。

本文由手机购彩平台发布于手机购彩平台-编程,转载请注明出处:内阴影背景初始位置

关键词: