CSS3-边框 border
2019-09-21 23:38
1631 查看
一、圆角效果 border-radius
使用方法:
border-radius:10px; /* 所有角都使用半径为10px的圆角 */
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
不要以为border-radius的值只能用px单位,你还可以用百分比或者em。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>border-radius</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; border-radius: 5px; } #box1 { width: 100px; height: 100px; background-color: red; border-radius: 50%; } #box2 { width: 100px; height: 100px; background-color: blue; border-radius: 5px 10px 20px 30px; } #box3 { width: 50px; height: 100px; background-color: coral; border-radius: 50px 0px 0px 50px; } </style> </head> <body> <h4>为正方形添加圆角效果</h4> <div id="box"></div> <br> <h4>实心圆</h4> <div id="box1"></div> <br> <h4>为正方形4个角分别添加不同的圆角幅度</h4> <div id="box2"></div> <br> <h4>半圆</h4> <div id="box3"></div> </body> </html>border-radius实用
二、边框阴影 box-shadow
box-shadow是向盒子添加阴影。支持添加一个或者多个。 语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>box-shadow</title> <style> #box { width: 100px; height: 100px; box-shadow: 4px 2px 6px #333333; } #box1 { width: 100px; height: 100px; box-shadow: 4px 2px 6px #333333 inset; } #box2 { width: 100px; height: 100px; box-shadow: 4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33cc00 inset } #box3 { width: 100px; height: 100px; box-shadow: -4px 2px 6px #333333; } #box4 { width: 100px; height: 100px; box-shadow: 4px -2px 6px #333333; } </style> </head> <body> <h3>外阴影</h3> <div id="box"></div> <h3>内阴影</h3> <div id="box1"></div> <h3>添加多个阴影</h3> <div id="box2"></div> <h3>X轴偏移量为负数</h3> <div id="box3"></div> <h3>Y轴偏移量为负数</h3> <div id="box4"></div> </body> </html>box-shadow实用
三、为边框应用图片 border-image
border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。
border-image的语法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>border-image</title> <style> #box { width: 180px; height: 180px; background: #F4FFFA; border: 70px solid #ddd; border-image: url(/img/1.png) 70 repeat } #box1 { width: 170px; height: 170px; border: 70px solid; border-image: url(/img/1.png) 70 round; } #box2 { width: 170px; height: 170px; border: 70px solid; border-image: url(/img/1.png) 70 stretch; } #border_image { height: 100px; width: 450px; border: 15px solid #ccc; border-image: url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 30 round; } </style> </head> <body> <h3>repeat(重复)</h3> <div id="box"></div> <h3>round(平铺)</h3> <div id="box1"></div> <h3>stretch(拉伸)</h3> <div id="box2"></div> <h3>请为我镶嵌上漂亮的画框吧</h3> <div id="border_image"> </body> </html>border-image实用
相关文章推荐
- CSS3设置Border边框是内边框还是外边框
- CSS3利用border-radius实现边框圆角
- css3(border-radius)边框圆角详解
- 深入浅析css3 border-image边框图像详解
- CSS3简明教程-2.1.CSS3边框之border-image
- CSS3 border-radius边框圆角
- CSS3边框border
- CSS3 border-radius边框圆角
- CSS3简明教程-2.2.CSS3边框之 圆角border-radius
- CSS3之边框图片border-image
- css3边框背景border-image
- CSS3边框 圆角效果 border-radius
- css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)
- 【CSS3】---为边框应用图片 border-image
- [CSS3] 边框 Border
- 关于css3的边框的border-radius和border-image用法的详解
- CSS3边框 为边框应用图片 border-image
- css3 border img 边框图片
- CSS3教程:边框属性border的极致应用
- CSS3之边框图片border-image