<img src="https://img-blog.csdn.net/20141018180719218?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSFRYX0hlbGxvV29ybGQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><!DOCTYPE html>
<html>
<head>
<title>border</title>
<meta charset="utf-8">
<style type="text/css">
*{
background:#eee;
}
.div_border-img{
width: 200px;
height: 100px;
background: #e43;
/*border:30px solid; */
border-width: 30px;
border-image: url(11.jpg) 15 30 30 30 repeat;
}
.div_box-shadow{
width: 200px;
height: 100px;
margin: 0px auto;
background: #faa;
box-shadow: 100px 100px 200px red;
}
.div_box-shadow-dd{
width: 3px;
margin-left: 200px;
margin-top: 200px;
height: 3px;
background: red;
border-radius: 100%;
/*PS:第四个值是表示扩大 缩小;*/
box-shadow:0px -10px 0px 2px #000,
10px 0px #333,
0px 10px yellow,
-10px 0px #333,
-7px -7px 0px 0.5px blue,
7px -7px 0 1.5px #333,
7px 7px red,
-7px 7px #333;
}
.div_gradient{
width: 200px;
height: 200px;
/*1属性：渐变角度 2属性：颜色+空格+纯色的长度（百分比、px）。。*/
/*background:-webkit-linear-gradient(top right,red 50px,yellow);*/
/*background:-webkit-linear-gradient(-135deg,red 50px,yellow);*/
/*最简写法*/
/*background:-moz-linear-gradient(red,yellow); */
/*rgba中的a指的是透明度*/
/*background:-webkit-linear-gradient(left top,rgba(160,232,10,1),rgba(3,188,250,0.5)); */
/*background:-webkit-linear-gradient(-135deg,rgba(160,232,10,1),rgba(3,188,250,0.5)); */
/*可以增加多个颜色，注意后面的百分比>前面的百分比*/
/*background: -webkit-radial-gradient(#eee 5px,green 15px,#faa 20px,#000 50px,red 55px);
border-radius: 100%;*/
/*重复的线性变换*/
background:-webkit-linear-gradient(red,yellow,red,green);
}
</style>
</head>
<body>
<!-- <div class="div_border-img"></div> -->
<!-- <div class="div_box-shadow"></div> -->
<!-- <div class="div_box-shadow-dd"></div> -->
<div class="div_gradient"></div>
</body>
</html>
01-07
958
958
07-22
6909
6909
06-07
367
367
10-10
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
