border-radius 用于创建圆角边框。 box-shadow 为元素添加阴影。 border-image 可以将图像指定为边框。
您可以使用边框半径功能创建带圆角的边框。
下面是与此功能关联的五个属性。
以下代码创建一个曲线边框。
<!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>
上面的代码呈现如下：
我们可以使用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>
上面的代码呈现如下：
border-image属性指定要用作边框的图像。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 15px solid transparent;
width: 250px;
padding: 10px 20px;
}
#round {
border-image: url(http://www..cn/style/demo/border.png) 30 30 round;
}
#stretch {
border-image: url(http://www..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>
上面的代码呈现如下：
下面是使用的图像︰
响应式 Web 设计 - 介绍什么是响应式 Web 设计?响应式 Web 设计让你的网页能在所有设备上有好显示。响应式 Web 设计只使用 HTML ...
路径描述img src="logo.jpg"logo.jpg 位于与当前网页相同的文件夹img src="logo/logo.jpg"logo.jpg 位于当前文件夹的 logo文件夹...
我们对Windows各种各样的鼠标样式都不陌生，当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会...
