【CSS3】边框

桃扇骨 2022-03-21 14:46 208阅读 0赞

### CSS3 边框 ###

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。  
在本章中，您将了解以下的边框属性：  
![在这里插入图片描述][20190202172125811.png]

### CSS3 圆角 ###

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。  
在 CSS3 中，很容易创建圆角。  
在 CSS3 中 border-radius 属性被用于创建圆角：  
这是圆角边框！  
在div中添加圆角元素：

div{
    border:2px solid;
    border-radius:25px;
    }

### CSS3 盒阴影 ###

CSS3 中的 box-shadow 属性被用来添加阴影:  
在div中添加box-shadow属性

div{
    box-shadow: 10px 10px 5px #888888;
    }

### CSS3 边界图片 ###

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：  
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：  
在 div 中使用图片创建边框:  
![在这里插入图片描述][20190202172301796.png]  
在 div 中使用图片创建边框

div{
    border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    }

### 新边框属性 ###

![在这里插入图片描述][2019020217235882.png]

[20190202172125811.png]: /images/20220321/c4f227b11b86443285d40432259f5624.png
[20190202172301796.png]: /images/20220321/cb6137985e22406a811bbd699c1be756.png
[2019020217235882.png]: /images/20220321/409118aef837470cb1f9507aa38a26d4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3 背景和边框

CSS3完全向后兼容，因此不必改变现有的设计。 css3中的模块：选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面 1. 边框

叁歲伎倆/ 2022年09月21日 05:36/ 0 赞/ 151 阅读

相关 css3边框颜色渐变

前言边框（border），平时最常用的样式之一，它可以设置宽度、样式和颜色。以前需求都比较单纯，颜色使用单色就能满足要求，但是现在不一样了，用户审美提高了，要求就三点：

秒速五厘米/ 2022年09月11日 00:27/ 0 赞/ 203 阅读

相关 css3_边框与背景

Css3只能在ie8以上的版本才能用。 1. 边框圆角 <div class="radius">边框圆角</div> .radius\{width:200px;heigh

Myth丶恋晨/ 2022年05月25日 05:11/ 0 赞/ 181 阅读

相关 Css3圆角边框

1行代码搞定CSS3的圆角。 webkit核心浏览器使用-webkit-border-radius，如-webkit-border-radius:10px; fire

待我称王封你为后i/ 2022年04月14日 06:07/ 0 赞/ 279 阅读

相关【CSS】边框

CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

淩亂°似流年/ 2022年04月01日 02:51/ 0 赞/ 283 阅读

相关【CSS3】边框

CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性： ![

桃扇骨/ 2022年03月21日 14:46/ 0 赞/ 209 阅读

相关 CSS3 变色背景动态边框

动态边框样式参考： [https://juejin.im/post/5cdbc938f265da034d2a38c1\heading-2][https_juejin.im_po

ゞ浴缸里的玫瑰/ 2022年01月31日 09:15/ 0 赞/ 218 阅读

相关 css边框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

妖狐艹你老母/ 2021年12月11日 02:23/ 0 赞/ 354 阅读

相关 CSS3边框与圆角

1. CSS3 圆角 border-radius 属性 > 一个最多可指定四个border -\- radius属性的复合属性，这个属性允许你为元素添加圆角边

水深无声/ 2021年11月05日 12:56/ 0 赞/ 292 阅读

相关 CSS边框

边框每个边框有 3 个方面：宽度、样式，以及颜色。 ![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc

雨点打透心脏的1/2处/ 2021年10月19日 10:18/ 0 赞/ 398 阅读