半透明边框
border:10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
相关语法:
background-clip: border-box|padding-box|content-box;
多重边框
box-shadow方案
box-shadow: 0 0 0 10px red,
0 0 0 15px green,
0 2px 5px 20px white;
*:需要注意的是,上面所创建的边框是伪边框,并不响应鼠标事件。
outline方案(仅可创建双重边框)
border: 5px solid red;
outline: 10px solid green;
背景定位
background-position方案
background: url(2.jpg) no-repeat;
width: 100%;
height: 100%;
background-position: right 10px bottom 10px;
*:只有background-image时,需要设置基础大小,不然不会显示,因为背景图片不会撑开div。
background-origin方案
background-position默认是以padding-box为准,通过background-origin可以设置为content-box。
calc方案
background: url(2.jpg) no-repeat;
background-position: calc(100% - 10px) calc(100% - 10px);
*:calc以左上角为基准。
**:calc里的加减运算负前后必须有空格,这是为了向前兼容。
边框内圆角
color: white;
background:black;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em red;
outline: .6em solid red;
条纹背景
水平条纹
background:linear-gradient(gray 30%,pink 70%);//渐变
background:linear-gradient(gray 30%,pink 30%);//不渐变
*:如果我们把第二个色标的位置值设置为 0, 那它的位置就总是会被浏览器调整为前一个色标的位置值。
垂直条纹(重复)
background:linear-gradient(90deg,red 50%,blue 0);
background-size: 50% 100%;
斜向条纹
background:repeating-linear-gradient(60deg,#fb3 0px,#fb3 15px,#58a 15px,#58a 30px);//角度,条纹1的渐变颜色1 起点,条纹1的渐变颜色2 终点,条纹2的渐变颜色1 起点,条纹2的渐变颜色2 终点;
同色系条纹
background:#58a;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1),15px,transparent 0,transparent 30px);
复杂的背景图案
网格
background:#58a;
background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;
波点
background:#655;
background:radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);;
background-size: 30px 30px;
background-position: 0 0 ,15px 15px;
*:为了达到效果,第二层的偏移量必须为贴片宽度的一半。
图像边框
连续的图像边框
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),url(./2.jpg);
background-size: cover;
background-clip: padding-box,border-box;
background-origin: border-box;
*:background-clip 属性规定背景的绘制区域。
复古信封
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,red 0,red 1em,transparent 0,transparent 2em,#58a 0,#58a 3em,transparent 0,transparent 4em);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。