CSS3 新特性 box-shadow 陰影效果、圓角border-radius效果實(shí)現(xiàn)

發(fā)布時間：2024-10-17 16:01:18 作者：富士康質(zhì)檢員張全蛋

CSS3的border-radius屬性可以輕松制作圓角效果,支持一至四個值來分別定義四個角的圓角大小,一個值時所有角圓角相同,兩個值時對角線上的角相同,本文給大家介紹CSS3 新特性 box-shadow 陰影效果、圓角border-radius，感興趣的朋友一起看看吧

圓角

使用CSS3 border-radius屬性，你可以給任何元素制作"圓角"，border-radius屬性，可以使用以下規(guī)則：
（1）四個值：第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角
（2）三個值：第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角
（3）兩個值：第一個值為左上角與右下角，第二個值為右上角與左下角
（4）一個值：四個圓角值相同

如果想要圖形變?yōu)閳A角效果，只需要添加一個屬性就行了，border-radius 這個屬性。如果想圓的厲害那么這個值就變大一些。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <style>
       div{
            width: 100px;
            height: 100px;
            background-color: rgb(151, 26, 49);
            border-radius: 10px;
       }
       img{
        width: 100px;
        height: 100px;
        border-radius: 10px;
       }
    </style>
</head>
<body>
   <div>
    <img src="../vue/1.jpg">
   </div>
</body>
</html>

如果想要變?yōu)閳A形，那么就寫100%就行了。

box-shadow 陰影效果

margin: 0 auto：上下不需要管，auto是讓左右的空間平均分配，然后讓盒子在中間，這就是居中。讓左右空間的間隙平均分配就是auto的作用。

0代表水平方向沒有陰影，第二個0代表垂直方向沒有陰影，第三個是陰影的模糊度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            background-color: greenyellow;
            margin: 0 auto;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="d1">
    </div>
</body>
</html>

到此這篇關(guān)于CSS3 新特性 box-shadow 陰影效果、圓角border-radius的文章就介紹到這了,更多相關(guān)CSS3 新特性 box-shadow內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！