欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS3 边框

程序员文章站 2022-03-24 11:53:53
CSS3 边框 在 CSS3 中， 属性用于创建圆角。 语法 |值|描述| | | | |length|设置拐角的半径。| |%|使用百分比定义拐角的半径。| 效果如下： 在 CSS3 中， 属性用来添加阴影。 语法 |值|说明| | | | | |必需，表示水平阴影相对于元素的偏移位置。当 大于0 ......

css3 边框

border-radius

在 css3 中，border-radius属性用于创建圆角。

语法

border-radius: 1-4 length|% / 1-4 length|%;
/* 1-4表示至少一个至多4个 */
/* 1-4分别表示左上角、右上角、右下角和左下角。简单记为顺时针 */
/* 省略某个角时，它会与对角保持一致 */
/* 如 */
border-radius: 10px 5px;
/* 相当于 */
border-radius: 10px 5px 10px 5px;

border-radius: 10px 5px 15px;
/* 相当于 */
border-radius: 10px 5px 15px 5px;
值 描述
length 设置拐角的半径。
% 使用百分比定义拐角的半径。 
<html>
<head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 2px solid;
        border-radius: 25px;
    }
</style>
</head>
<body>
<div></div>
</body>
</html>

效果如下：
CSS3 边框

box-shadow

在 css3 中，box-shadow属性用来添加阴影。

语法

box-shadow: h-shadow v-shadow blur spread color inset;
值 说明
h-shadow 必需，表示水平阴影相对于元素的偏移位置。当h-shadow大于0时，表示向右偏移，小于0时，向左偏移，等于零时，刚好与元素重合。
v-shadow 必需，表示垂直阴影相对于元素的偏移位置。当v-shadow大于0时，表示向下偏移，小于0时，向上偏移，等于零时，刚好与元素重合。
blur 可选，模糊距离，有点类似于羽化，小于0时就不显示了，等于0时没有模糊效果。
spread 可选，阴影的大小，阴影的面积，大于0时阴影面积大于元素面积，小于0时阴影面积小于元素面积。
color 可选，阴影的颜色。
inset 可选，设置inset时，阴影变成内阴影。 
<html>
<head>
<style>
    div {
        width: 100px;
        height: 100px;
        box-shadow: 10px 10px 5px #888;
    }
</style>
</head>
<body>
<div></div>
</body>
</html>

效果如下：
CSS3 边框

border-image

在 css3 中，border-image属性允许指定一个图片作为边框。

上一篇： JavaScript 系列博客（二）

下一篇： 曹操第一个封侯的谋士为什么是贾诩？

推荐阅读