css3圆角，建议IE10以上
如果border-radius 单位是百分比，则参考为自身宽高，因此当宽高不一致时，圆角为不规则形状
如果border-radius 为50%，则为椭圆；当宽高一致时，则为正圆
单独设置每个圆角：
四个值： border-radius：左上角 右上角 右下角 左下角
三个值： border-radius：左上角 右上角+左下角 右下角
两个值： border-radius：左上角+右下角 右上角+左下角
兼容浏览器前缀
谷歌 -webkit-
火狐 -moz-
IE -ms-
欧朋 -o-
气泡对话框
<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta charset="UTF-8"><title>Document</title><style> div{ width:500px; height:300px; border:1px solid #000; position: relative; font-size:24px; line-height: 300px; text-align:center; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%; } div::before, div::after{ content:''; display: block; position: absolute; border:1px solid #000; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border-radius:50%; } div::before{ width:50px; height:50px; right:50px; bottom:-25px; } div::after{ width:30px; height:30px; right:25px; bottom:-50px; }</style></head><body> <div>这是一段气泡对话框</div></body></html>
box-shadow:水平偏移 垂直偏移 模糊 扩展 颜色 位置
<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta charset="UTF-8"><title>Document</title><style> div{ width: 300px; height: 200px; background-color: #f0f; margin:0 auto; box-shadow:10px 10px 5px 0 #bbb; }</style></head><body> <div></div></body></html>
border-image 欧朋浏览器和IE浏览器不兼容
首先准备border.png
演示效果1：
图片铺满整个边框
<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta charset="UTF-8"><title>Document</title><style> div{ width: 300px; height: 200px; background-color: #f0f; margin:0 auto; border:30px solid black; border-image:url(source/border.png) 30 30 round; }</style></head><body> <div></div></body></html>
演示效果2：
图片被拉伸来铺满边框
<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta charset="UTF-8"><title>Document</title><style> div{ width: 300px; height: 200px; background-color: #f0f; margin:0 auto; border:30px solid black; border-image:url(source/border.png) 30 30 stretch; }</style></head><body> <div></div></body></html>
联系客服
