圆角
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; border: 1px solid; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius:10px 20px 30px 40px; } </style> </head> <body> <div class="test"> </div> </body> </html>
border-radius用法
圆角风车
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } /**/ .wrap{ width: 300px; height: 300px; /* border: 1px solid; */ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 2s; } .wrap > div{ margin: 10px; width: 130px; height: 130px; border: 1px solid; background: #BBFFAA; float: left; box-sizing: border-box; } .wrap > div:nth-child(1),.wrap > div:nth-child(4){ border-radius: 0 60%; } .wrap > div:nth-child(2),.wrap > div:nth-child(3){ border-radius: 60% 0; } .wrap:hover{ transform: rotate(120deg); } </style> </head> <body> <div class="wrap"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
圆角风车案例注意transform：rotate（120deg）和transition：2s；用法
对话
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } .test{ width: 600px; height: 400px; border: 1px solid; border-radius: 50%; text-align: center; font: 32px helvetica; line-height: 400px; position: relative; } .test:before{ position: absolute; display: block; content: ""; width: 40px; height: 40px; border: 1px solid; right: -80px; bottom: -80px; border-radius: 50%; } .test:after{ position: absolute; display: block; content: ""; width: 80px; height: 80px; border: 1px solid; right: -20px; bottom: -20px; border-radius: 50%; } </style> </head> <body> <div class="test">大家好欢迎入坑</div> </body> </html>
对话练习
CSS3扩展--滚动条
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; /* border: 1px solid; */ /* 禁止系统默认滚动条 */ overflow: hidden; } body{ height: 100%; /* border: 1px solid #BBFFAA; */ /* 禁止系统默认滚动条 */ overflow: hidden; } .wrap{ height: 100%; border: 1px solid #BBFFAA; overflow: auto; } </style> </head> <body> <div class="wrap"> <div class="test" style="height: 3000px;"></div> </div> </body> </html>
禁止系统默认滚动条在html中和body中使用overflow：hidden；
使用绝对定位模拟固定定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* .test{ width: 200px; height: 200px; background: #BBFFAA; position: absolute; left: 0; top: 0; } */ html{ height: 100%; overflow: hidden; } body{ height: 100%; overflow: hidden; } .wrap{ height: 100%; overflow: auto; } .gg{ width: 200px; height: 200px; background: #BBFFAA; position: absolute; left: 0; top: 0; } </style> </head> <body> <div class="wrap"> <div class="gg"> </div> <div class="test" style="height: 3000px;"> </div> </div> <!-- 初始包含块：一个视窗大小的矩形 --> </body> </html>
初始包含块：一个视窗大小的矩形
边框图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border: 30px solid; /*border-image-source属性定义使用一张图片代替边框样式 属性值 none 默认值 使用border-style定义的样式 */ border-image-source:url(img/border-image.png) ; /* border-image-slice属性通过规范border-image-source的图片明确分 割为9个区域，四个角，四边以及中心区域 */ border-image-slice: 33.333333% fill; /* border-image-repeat定义图片如何填充边框 属性值 stretch 拉伸 repeat,round 平铺 */ border-image-repeat: round; /* border-image-width 定义边框宽度 属性值 默认值 1 属性值根据border的数值决定 */ border-image-width: 10px; /* border-image-outset 定义边框图像可超出边框盒的大小 属性值 默认值 0 正值：可超出边框盒的大小 */ border-image-outset: 10px; } </style> </head> <body> <div class="test"></div> </body> </html>
background-image-source属性定义使用一张图片代替边框样式
默认值 none 使用border-style定义的样式
border-image-slice属性通过规范border-image-source的图片明确分
割为9个区域，四个角，四边以及中心区域
border-image-repeat定义图片如何填充边框
属性值 stretch 拉伸
repeat,round 平铺
border-image-width 定义边框宽度
属性值 默认值 1
属性值根据border的数值决定
border-image-outset 定义边框图像可超出边框盒的大小
属性值 默认值 0
正值：可超出边框盒的大小
CSS2背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 100px; height: 100px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #BBFFAA; border: 1px solid; background-image:url(img/tg.png); background-position: 10% 10%; } /* background-image属性用于为一个元素设置一个或多个背景，以堆叠的方式进行 注意：background-color在image之下，边框和内容会在image之上 属性值： 默认值 none background-position指定背景位置的初始位置 默认值 0% 0% 百分比：参照尺寸为背景图片定位区域的大小减去背景图片的大小 */ </style> </head> <body> <div class="test"></div> </body> </html>
background-image属性用于为一个元素设置一个或多个背景，以堆叠方式进行
注意：background-color在image之下，边框和内容会在image之上
默认值 none
background-position指定背景位置初始位置
默认值 0% 0%
百分比：参照尺寸为背景图片定位区域的大小减去背景图片的大小、
CSS2背景background-attachmen
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 400px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* background-color: #BBFFAA; */ border: 1px solid; background-image:url(img/tg.png); background-repeat: no-repeat; /* background-position: 10% 10%; */ background-attachment: fixed;/*平铺到视口*/ overflow: auto; } </style> </head> <body> <div class="test"> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br />leileibi<br /> leileibi<br />leileibi<br /> </div> </body> </html>
background-attachment属于脑瘫行为了解就好
属性值 fixed 平铺到视口
CSS3背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ /*默认背景图片是从padding box开始*/ /* 从border box结束*/ width: 300px; height: 300px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #BBFFAA; border: 30px solid rgba(0,0,0,.2); /*以下css3包含*/ background-image:url(img/tg.png); background-repeat: no-repeat; /* background-origin 设置背景渲染的起始位置 属性值 border-box 背景图像向对于边框盒定位 默认值 padding-box 背景图像相对于内边距框定位 content-box 背景相对于内容框定位 */ background-origin: content-box; background-size: 100% 100%; } </style> </head> <body> <div class="test"> </div> </body> </html>
background-origin 设置背景渲染的起始位置
属性值 border-box 背景图像对于边框盒定位
默认值 padding-box 背景图像相对于内边距框定位
content-box 背景相对于内容框定位
clip
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 300px; height: 300px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #BBFFAA; border: 30px solid rgba(0,0,0,.2); padding: 50px; background-image:url(img/tg.png); background-repeat: repeat; background-origin: padding-box; /*按文字剪切背景*/ -webkit-background-clip: text; font:bold 80px/300px "微软雅黑"; text-align: center; color: rgba(0,0,0,.3); } </style> </head> <body> <div class="test"> 蕾蕾比 </div> </body> </html>
-webkit-background-clip:text
按文字剪切背景：注意文字透明度
background简写属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ background-image: none; background-position: 0% 0%; background-size: auto auto; background-repeat: repeat; background-origin: padding-box; background-clip: border-box; background-attachment: scroll; background-color: transparent;/*透明*/ } </style> </head> <body> <div></div> </body> </html>