CSS3 边框

最新推荐文章于 2021-12-23 15:40:03 发布

我的乌托

最新推荐文章于 2021-12-23 15:40:03 发布

阅读量89

点赞数

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	设置拐角的半径。
%	使用百分比定义拐角的半径。

&lt;head&gt;
&lt;style&gt;
    div {
        width: 100px;
        height: 100px;
        border: 2px solid;
        border-radius: 25px;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

效果如下：

`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`时，阴影变成内阴影。

&lt;head&gt;
&lt;style&gt;
    div {
        width: 100px;
        height: 100px;
        box-shadow: 10px 10px 5px #888;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

效果如下：

`border-image`

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

原文地址：https://www.cnblogs.com/zhuangshq/p/10144805.html

我的乌托

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 边框

CSS3 边框border-radius在 CSS3 中，border-radius属性用于创建圆角。语法border-radius: 1-4 length|% / 1-4 length|%;/* 1-4表示至少一个至多4个 *//* 1-4分别表示左上角、右上角、右下角和左下角。简单记为顺时针 *//* 省略某个角时，它会与对角保持一致 *//* 如 */border-rad...
复制链接

扫一扫