1、border-radius
border-top-left-radius:10px; = border-top-left-radius:10px 10px; （水平10px 竖直10px 被正圆切割 两个值不同切割效果不同） border-top-right-radius:20px; = border-top-right-radius:20px 20px; border-bottom-right-radius:30px; = border-bottom-right-radius:30px 30px; border-bottom-left-radius:40px; = border-bottom-left-radius:40px 40px;
<style> div{ 100px; height:100px; border:1px solid #000; position:absolute; left:calc(50% - 50px); /* 减号两边必须加空格 */ top:calc(50% - 50px); border-top-left-radius:100px 100px; /* 水平和垂直方向拉伸到尽头（在正方形中） 得到一个扇形 */ } </style> <body> <div></div>
border-radius:10px 20px 30px 40px / 10px 20px 30px 40px /* 前面为水平方向值 后面为竖直方向值 */
2、box-shadow
box-shadow:0px 0px 0px 0px #0ff /* 水平偏移量 竖直偏移量 模糊值 传播距离（可不填） */ /* 模糊是基于原来边框的位置向两边同时模糊 */ box-shadow:inset 0px 0px 1px 0px #fff /* 内阴影 */
阴影可设置多层，小例子：
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#000;
}
div{
position:absolute;
left:calc(50% - 150px);
top:calc(50% - 150px);
300px;
height:300px;
border-radius:50%;
/* border:1px solid #fff; */
box-shadow:inset 0px 0px 50px #fff,
inset 10px 0px 80px #f0f,
inset -10px 0px 80px #0ff,
inset 10px 0px 300px #f0f,
inset -10px 0px 300px #0ff,
0px 0px 50px #fff,
-10px 0px 80px #f0f,
10px 0px 80px #0ff;
}
</style>
<body>
<div></div>
</body>
小例子：
*{ margin:0; padding:0; } div{ position:absolute; border-radius:5px; left:calc(50% - 50px); top:calc(50% - 50px); 100px; height:100px; background-color:#fff; box-shadow:0px 1px 2px rgba(0, 0, 0, .1); transition:all 1s; } div::after{ content:""; position:absolute; left:0; top:0; 100%; height:100%; border-radius:5px; box-shadow:0px 5px 15px rgba(0, 0, 0, 0.3); opacity:0; transition:all 1s; } div:hover{ transform: scale(1.25, 1.25); } div:hover::after{ opacity:1; } </style> <body> <div></div> </body>
阴影在背景颜色的上面，在文字的下面
3、boder-imag<style>
*{
margin:0; padding:0; } body{ background-color:#000; } div{ position:absolute; left:calc(50% - 50px); top:calc(50% - 50px); 100px; height:100px; border:10px solid black; /* 支持渐变色 */ border-color:lightpink; /* 设置下面渐变色后border-color失效 */ border-image-source:linear-gradient(yellow,red); /* 引进图片 border-image-source:url() */ border-image-slice:10; /* 分割线 可以填四个数 四条分割线（上右下左） 填fill会把内容区也填充（一般不填）*/
border-image-outset:100px; /* 往外延伸的值，不可以填负数（不常用） */ border-image-1; /* 1为默认值，一般情况下是默认值，border-image-width为设置border里面能显示的图片背景的宽度 填auto会自动计算，与slice值看齐*/ border-image-repeat:stretch; /* stretch round repeat space */ /* border-image-repeat:stretch round 可以填两个参数，代表水平，垂直 */ /* border-image:source slice repeat 简便写法 */ } </style> <body> <div></div> </body>
4、background-image
<style>
*{
margin:0;
padding:0;
}
div{
position:absolute;
left:calc(50% - 50px);
top:calc(50% - 50px);
200px;
height:200px;
background-image:url(),url;
/* 可设置多个url */
background-size:100px 200px,100px 200px;
/* 设置两张图片的宽高 */
background-repeat:no-repeat;
background-position:0 0,100px 0;
/* 设置两张图片的位置 */
}//设置两张图片现象不常见 一般第二张图片用来占位，以防第一张图片加载不出来，容错
</style>
<body>
<div></div>
</body>
background-origin（图片从哪里起始）
<style>
*{
margin:0;
padding:0;
}
div{
position:absolute;
left:calc(50% - 100px);
top:calc(50% - 100px);
200px;
height:200px;
padding:20px;
border:20px solid transparent;
background-image:url();
background-origin:content-box; //默认值为padding-box
background-clip:border-box; //默认值 /* border-box padding-box content-box text 图片从哪里截取不显示 例：padding-box意为padding以外不显示背景图片 */
<!-- background-clip:text 文字反切背景图片 -->
<style>
*{
margin:0;
padding:0;
}
div{
position:absolute;
left:calc(50% - 200px);
top:100px;
height:100px;
line-height:100px;
font-size:100px;
font-weight:bold;
400px;
background-image:url();
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-fill-color:transparent; //固定写法，只有webkit里能用
}
</style>
<body>
<div>成哥很帅</div>
</body>
/* 可以加动画效果 */
background-position:0 0
transition:all 0.6s;
div:hover{
background-position:center center;
}
background-position:20px 20px;（position相对于起始位置的点开始定位，例如在这里相对于content-box定位） /* 起始位置有三种情况：border-box padding-box content-box */
/* 起始位置为内容区 右侧和下侧可以延伸 */
/* 起始位置为padding */
/* 起始位置为border */ background-repeat:no-repeat; } </style> <body> <div></div> </body>
background-repeat: no-repeat repeat-x repeat-y round space （css3新增）
background-repeat:round space; （代表横向round 竖向space） （不是css3的以前的属性不能填两个值）
background-attachment
<style>
*{
margin:0;
padding:0;
}
div{
500px;
height:500px;
border:1px solid red;
overflow:scroll;
background-image:url( );
background-repeat:no-repeat;
background-size:400px 300px;
background-position:100px 100px;
background-attachment:scroll; //默认值(相对于容器定位，不跟内容走)
/* local 相对于容器里的内容区定位
fixed 相对于可视区视口定位（屏幕），但是超出容器的范围则无法显示 */
}
</style>
<body>
<div>清晨的庭院里，细雨在窗外一滴滴地划落。我倚在窗台看着庭院中的花草树木，我和她曾一起走过的日子在眼前浮现，那些快乐时光已经远去很多年。如今我已是垂垂暮年，这么多年我一直在这快乐故地守候着她。
窗外无声，我看见一个年轻的女孩在庭院的角落里抚摸着花朵，面带微笑。她漆黑的双眸如此美丽。她身穿白裙，秀发在风中微微扬起。她的眼前弥漫着雾气，所有芳香绽放她的温柔。这场景好似一幅画卷，让我沉醉。我在窗台不语，时间静止，那个女孩是我朝思暮想的人，是我一生中最爱的人。
我慌忙地拿起雨伞想为她挡雨，可这么多年没见了，我该说什么好。我在门口徘徊着，难以忘怀她的容颜。只怪时间匆匆，别来无恙。我听见她的喃喃细语全部关于我，她和我曾说过的话语从心底翻出。没有甜言蜜语，没有海誓山盟，却让我铭记一生。
我悄悄地靠近她，颤抖的手穿过她的秀发。确认下是不是梦。深吸了一口气，紧紧拥抱她。她一怔，回头看我，当她与我对视的那一刻，带走我灵魂的是她清风无邪的笑容。我痴痴的看着她，泪水在眼眶里打转。她的微笑，一如当年，让我着迷。我们就这样相拥着，不说话就很美好。
在我准备询问这么多年她去了哪里，为何一去不复还的那一瞬间，一缕清风吹过，漫天的花舞，惊醒了我，埋葬了我一生的守候。原来那是深藏我心中的一次美丽的邂逅。
我在伞下停留了一会，回头望一眼自己的脚印，这儿仿佛留下了陪她走过一生的痕迹。我转身泪流，打湿了苍老的心头。西风多少恨，一直吹不散眉弯。秋月未了，风起云落。再看看庭院，才发觉花已经落下，她早已离去。
年轻时，我们都做着同样的梦，在梦里前行。忽略了太多太多的同时，同样在不停地失去很多很多的事物，一切都变得微不足道。长大后，声嘶力竭地呼喊，面对的只是义无反顾的离开。
尘世间的遇见，那么的平淡。也许，一段情，一旦开始，便是一生。雨一直下着，心一直痛着，想忘记所有，骗自己和她来生还可以再一起看细水长流。爱与不爱，爱如何，不爱又怎样?梦醒才会知道所有爱情花开的无奈，都会在自己的梦中落下。
</div>
br*100 //让容器动
</body>