CSS3 边框

2018-01-16 18:43 更新

CSS3中添加了以下三个属性。

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

border-radius 用于创建圆角边框。 box-shadow 为元素添加阴影。 border-image 可以将图像指定为边框。

圆角边框

您可以使用边框半径功能创建带圆角的边框。

下面是与此功能关联的五个属性。

  • border-top-left-radius
    border-top-right-radius
    border-bottom-left-radius
    border-bottom-right- radius
    设置单个拐角的半径。
    Value:一对长度或百分比值。 百分比与边框的宽度和高度有关。
  • border-radius
    此简写属性会立即设置所有角。
    Value:一对或四对长度或百分比值,用/字符分隔。

以下代码创建一个曲线边框。


<!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>

上面的代码呈现如下:

圆角边框

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>

上面的代码呈现如下:

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>

上面的代码呈现如下:

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>

上面的代码呈现如下:

border-image

下面使用图像

使用的图像


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号