CSS3-圆形边框和阴影

顺晟科技

2022-09-13 14:14:22

概述

CSS3是CSS的发展形势，一些原本需要用JavaScript才能实现的效果，现在通过CSS3就可以实现。

不同的浏览器对于CSS3的支持程度不同，一些属性在某些浏览器中需要加上前缀，具体需要什么前缀需要在w3school中查询

圆角边框border-radius

圆角边框是CSS3中的新属性，在没有圆角边框前，要实现圆角边框只能通过添加背景图片来实现，现在可以用border-radius属性来实现

border-top-left-radius:左上角

border-top-right-radius:右上角

border-botton-left-radius:左下角

border-bottom-right-radius:右下角

每个属性可以有两个取值，一个是水平方向，一个是竖直方向。也可以只有一个取值，意味着水平方向和垂直方向是同一个值

 1 <html>
 2     <head>
 3         <title>CSS3</title>
 4         <style>
 5           div{
 6               width: 200px;
 7               height: 100px;
 8               background-color: aqua;
 9               border-color: black;
10               border-style: double;
11               border-width: 5px;
12               border-top-left-radius: 10px 20px;
13               border-bottom-right-radius: 10px;
14               text-align: center;
15           }  
16         </style>
17     </head>
18     <body>
19         <div>
20             我有圆角边框
21         </div>
22     </body>
23 </html>

也可以只设置border-radius，等于给四个角赋同样的值

 1 <html>
 2     <head>
 3         <title>CSS3</title>
 4         <style>
 5           div{
 6               width: 200px;
 7               height: 100px;
 8               background-color: aqua;
 9               border-color: black;
10               border-style: double;
11               border-width: 5px;
12               border-radius: 50px;
13               text-align: center;
14           }  
15         </style>
16     </head>
17     <body>
18         <div>
19             我有圆角边框
20         </div>
21     </body>
22 </html>

同样可以通过设置圆角边框实现圆形的div，只需要设置高度宽度大小一致，并且border-radius设置为高度宽度值的一半即可

 1 <html>
 2     <head>
 3         <title>CSS3</title>
 4         <style>
 5           div{
 6               width: 100px;
 7               height: 100px;
 8               background-color: aqua;
 9               border-color: black;
10               border-style: double;
11               border-width: 5px;
12               border-radius: 50px;
13               text-align: center;
14           }  
15         </style>
16     </head>
17     <body>
18         <div>
19         </div>
20     </body>
21 </html>

阴影box-shadow

box-shadow的参数：inset/空(如果使用outset就不写这一项) 水平位移垂直位移模糊距离颜色

inset:内部阴影

outset:外部阴影（使用较多）

 1 <html>
 2     <head>
 3         <title>CSS3</title>
 4         <style>
 5           div{
 6               width: 100px;
 7               height: 50px;
 8               background-color: yellowgreen;
 9               border-color: black;
10               border-style:solid;
11               border-width: 2px;
12               border-radius: 25px;
13               text-align: center;
14               box-shadow:10px 10px 5px #888;
15           }  
16         </style>
17     </head>
18     <body>
19         <div>
20         </div>
21     </body>
22 </html>

上一篇：使用纯CSS实现圆角边框和完美兼容性下一篇：CSS圆角边框和阴影

网站建设

Css

CSS3-圆形边框和阴影

概述

圆角边框border-radius

阴影box-shadow