<div class="css1">1半透明边框</div>
<div class="css2">2多重边框</div>
<div class="css3">3灵活的背景定位</div>
<div class="css4">4边框内圆角</div>
<div class="css5">5条纹背景p30</div>
<div class="css6">6复杂背景图片</div>
<div class="css9">9自适应的椭圆p55</div>
<div class="css12">12切角效果</div>
<div class="css13">13圆切角效果</div>
div{
display: inline-block;
margin: 10px;
}
.css1{
width: 100px;
height: 100px;
padding: 5px;
border:10px dotted hsla(120,65%,75%,.5);/*HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。色,饱,亮,不透明度*/
background: red;
text-align: center;
background-clip:content-box;/*指定绘图区的背景:padding-box /content-box*/
}
.css2{
width: 100px;
height: 100px;
background:yellowgreen;
/*box-shadow:水平阴影的位置,垂直阴影的位置,模糊距离,阴影的大小,阴影的颜色*/
box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0px 2px 5px 15px rgba(0,0,0,1);
/*outline:2px dotted red;一种边框设置方式*/
/*outline-offset: -10px;*/
}
.css3{
width: 100px;
height: 100px;
background: url(../images/lunbo.png) no-repeat #58a;/*背景图片不重复*/
background-position: right 20px bottom 10px;
position: absolute;top: -20px;
position: relative;
font-weight: 300;
}
.css4{
background-color: tan;
padding: .8em;
border-radius: 1em;
box-shadow: 0 0 0 0.5em #655;
outline: 0.6em solid #655;
}
.css5{
width: 100px;
height: 100px;
/*background: linear-gradient( #fb3 20% , #58a 80%);!*水平条纹*!*/
/*background: linear-gradient( to right,#fb3 20% , #58a 80%);!*垂直条纹*!*/
background-size: 30px 100%;/*指定背景图像的大小*/
background: repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a 0,#58a 30px);/*只需要该角度*/
}
.css6{
width: 100px;
height: 100px;
background: white;
background-image: linear-gradient(rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(to right ,rgba(200,0,0,.5) 50%,transparent 0) ;
background-size: 30px 30px;
}
.css9{
background-color: tan;
padding: 30px;
border-radius: 50%;
}
.css12{
padding: 20px;
background: #5588aa;
background:linear-gradient(135deg,transparent 15px,#58a 0) top left,
linear-gradient(-135deg,transparent 15px,#58a 0) top right,
linear-gradient(-45deg,transparent 15px,#58a 0) bottom right,
linear-gradient(45deg,transparent 15px,#58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.css13{
padding: 20px;
background: #5588aa;
background:
radial-gradient(circle at top left, transparent 15px,#58a 0) top left,
radial-gradient(circle at top right, transparent 15px,#58a 0) top right,
radial-gradient(circle at bottom right,transparent 15px,#58a 0) bottom right,
radial-gradient(circle at bottom left,transparent 15px,#58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
本文章会持续更新哦!非常欢迎各位大佬讨论 提问 ~~