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{ width: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); width: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); width: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; width: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); width: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-width: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); width: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); width: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; width: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{ width: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>