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>
上面的代码呈现如下:
下面是使用的图像︰
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}.dropdown {...
您可以使用下面描述的与大小相关的属性来控制元素大小。width height 设置元素的宽度和高度。Value: auto or length or %min-wid...
HTML中有三种类型的列表。有序列表无序列表定义列表使用CSS,我们可以用不同的方式来设计它们。列表标记您可以使用 list-style-t...
CSS概述1. Cascading Style Sheets 层叠样式表,它可以控制多重网页的样式和布局;2. 需具备的基础知识:HTML、XHTML;3. 主要实...