用css实现部分常用样式

<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;
}

以上代码执行效果
本文章会持续更新哦！非常欢迎各位大佬讨论提问 ~~

用css实现部分常用样式

猜你喜欢