CSS3_边框

最新推荐文章于 2024-04-03 13:32:26 发布

翻译最新推荐文章于 2024-04-03 13:32:26 发布 · 609 阅读

文章标签：

#css3 #border #radius #image #box-shadow

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了CSS3模块，特别是边框技术，包括圆角边框、阴影、图片作为边框等特性。通过示例展示了如何创建具有圆角、阴影效果及使用图片作为边框的网页元素。

CSS3模块

CSS3 被划分为模块。其中最重要的模块包括：

选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
多列布局
用户界面

CSS3边框

CSS3圆角边框 [border-radius]

创建一个圆角边框：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:350px;
    height:200px;
    text-align:center;
    border-radius:90px;       /* 定义圆角的半径 */
    -moz-border-radius:25px;  /* 老的Firefox,添加'-moz-'前缀 */
}
</style>
</head>

<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>
</html>

CSS3边框阴影 [box-shadow]

请注意是box-shadow，不是border-shadow。
语法为：

box-shadow: h-shadow v-shadow blur spread color inset;

其中各个参数的含义如下：

参数	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。默认为0，模糊距离。
spread	可选。默认为0，是否将阴影区域扩大。
color	可选。默认为0，阴影的颜色。
inset	可选。默认为outset，将外部阴影 (outset) 改为内部阴影。当使用inset时，阴影不会超出元素的border区域。

创建一个普通的阴影区域：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    border:solid;
    width:300px;
    height:100px;
    background-color:#ff9900;
    box-shadow: 20px 120px 5px #888888;
    -moz-box-shadow: 10px 10px 5px #888888;  /* 老的Firefox,添加'-moz-'前缀 */
}
</style>
</head>
<body>

<div></div>

</body>
</html>

创建两幅图片，一张向左倾斜，一张向右倾斜，并且两张照片都添加阴影：

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
    margin:30px;
    background-color:#E9E9E9;
}

div.polaroid
{
    width:294px;
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    box-shadow:2px 2px 3px #aaaaaa;   /* Add box-shadow */
}

div.rotate_left
{
    float:left;
    -ms-transform:rotate(7deg);       /* IE 9, 添加'-ms-'前缀 */
    -moz-transform:rotate(7deg);      /* Firefox，添加'-moz-'前缀 */
    -webkit-transform:rotate(7deg);   /* Safari and Chrome，添加'-webkit-'前缀 */
    -o-transform:rotate(7deg);        /* Opera，添加'-o-'前缀 */
    transform:rotate(7deg);
}

div.rotate_right
{
    float:left;
    -ms-transform:rotate(-8deg);      /* IE 9, 添加'-ms-'前缀 */
    -moz-transform:rotate(-8deg);     /* Firefox，添加'-moz-'前缀 */
    -webkit-transform:rotate(-8deg);  /* Safari and Chrome，添加'-webkit-'前缀 */
    -o-transform:rotate(-8deg);       /* Opera，添加'-o-'前缀 */
    transform:rotate(-8deg);
}
</style>
</head>
<body>

<!-- 应用2个样式 -->
<div class="polaroid rotate_left">
    <img src="http://www.w3school.com.cn/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
    <p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>

<div class="polaroid rotate_right">
    <img src="http://www.w3school.com.cn/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
    <p class="caption">2010年上海世博会，中国馆。</p>
</div>


</body>
</html>

CSS3边框图片 [border-image]

该属性可以指定的值有：

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

将一个图片作为区域的边框：

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

.round
{
    -moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;      /* Old Firefox */
    -webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;   /* Safari and Chrome */
    -o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;        /* Opera */
    border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;
}

.stretch
{
    -moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch;     /* Old Firefox */
    -webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch;  /* Safari and Chrome */
    -o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch;       /* Opera */
    border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div class="round">在这里，图片铺满整个边框。</div>
<br>
<div class="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>
<img src="http://www.w3school.com.cn/i/border.png">

<p><b>注释：</b>Internet Explorer不支持border-image属性。</p>
<p>border-image属性规定了用作边框的图片。</p>

</body>
</html>