欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

CSS3 邊框

CSS3中添加了以下三個屬性。

  • border-radius
  • box-shadow
  • border-image

border-radius用于創(chuàng)建圓角邊框。box-shadow為元素添加陰影。border-image可以將圖像指定為邊框。

圓角邊框

您可以使用邊框半徑功能創(chuàng)建帶圓角的邊框。

下面是與此功能關聯(lián)的五個屬性。

  • border-top-left-radius
    border-top-right-radius
    border-bottom-left-radius
    border-bottom-right- radius
    設置單個拐角的半徑。
    Value:一對長度或百分比值。 百分比與邊框的寬度和高度有關。
  • border-radius
    此簡寫屬性會立即設置所有角。
    Value:一對或四對長度或百分比值，用/字符分隔。

以下代碼創(chuàng)建一個曲線邊框。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {border: medium solid black;border-top-left-radius: 20px 15px;
}
</style>
</head>
<body>
  <p>This is a test.</p>
</body>
</html>

上面的代碼呈現(xiàn)如下：

圓角邊框

border-radius簡寫屬性允許您為所有四個角指定一個值，或在單個值中指定四個單獨的值。

例子

以下代碼使用border-radius簡寫屬性。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {border: medium solid black;
}

#first {border-radius: 20px/15px;
}

#second {border-radius: 50% 20px 25% 5em/25% 15px 40px 55%
}
</style>
</head>
<body>
  <p id="first">This is a test.</p>

  <p id="second">This is a test.</p>
</body>
</html>

上面的代碼呈現(xiàn)如下：

border-radius

CSS3 box-shadow屬性

我們可以使用CSS3中的box-shadow屬性為box添加陰影。

<!DOCTYPE html>
<html>
<head>
<style> 
div {width: 300px;height: 300px;background-color: yellow;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div>Hi</div>

</body>
</html>

上面的代碼呈現(xiàn)如下：

box-shadow屬性

CSS3 border-image屬性

border-image屬性指定要用作邊框的圖像。

<!DOCTYPE html>
<html>
<head>
<style> 
div {border: 15px solid transparent;width: 250px;padding: 10px 20px;
}

#round {border-image: url(http://www.w3cschool.cn/style/demo/border.png) 30 30 round;
}
#stretch {border-image: url(http://www.w3cschool.cn/style/demo/border.png) 30 30 stretch;
}
</style>
</head>
<body>
    <div id="round">Here, the image is tiled (repeated) to fill the area.</div>
    <div id="stretch">Here, the image is stretched to fill the area.</div>
    
    <p>Here is the image that is used:</p>
    <img src="/attachments/jimg/border.png">

</body>
</html>

上面的代碼呈現(xiàn)如下：

border-image

下面是使用的圖像︰

使用的圖像