039_CSS3边框

1. 通过CSS3, 您能够创建圆角边框, 向矩形添加阴影, 使用图片来绘制边框, 并且不需使用设计软件, 比如: photoshop。

2. 边框左上角形状

2.1. border-top-left-radius属性定义左上角边框的形状。

2.2. border-top-left-radius属性的长度值或者百分比值定义四分之一椭圆(定义外部边框边缘的边角形状)的半径。第一个值是水平半径, 第二个值是垂直半径。如果省略第二个值, 则复制第一个值。如果长度为零, 则边角为方形, 而不是圆形。水平半径的百分比值参考边框盒的宽度, 而垂直半径的百分比值参考边框盒的高度。

2.3. 默认值

2.4. 可能值

3. 边框右上角形状

3.1. border-top-right-radius属性定义右上角边框的形状。

3.2. 默认值

3.3. 可能值

4. 边框右下角形状

4.1. border-bottom-right-radius属性定义右下角边框的形状。

4.2. 默认值

4.3. 可能值

5. 边框左下角形状

5.1. border-bottom-left-radius属性定义左下角边框的形状。

5.2. 默认值

5.3. 可能值

6.创建圆角边框

6.1. border-radius属性是一个简写属性, 用于设置border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius属性。

6.2. 语法:

6.2.1. top-left、top-right、bottom-right、bottom-left各是一对。

6.2.2. 如果省略bottom-left, 则与top-right相同。如果省略bottom-right, 则与top-left相同。如果省略top-right, 则与top-left相同。

6.3. 默认值

6.4. 可能值

6.5. 例子

6.5.1. 代码

<!DOCTYPE html>
<html><head><title>border-radius属性创建圆角边框</title><meta charset="utf-8" /><style type="text/css">div    {text-align: center;border: 2px solid #a1a1a1;padding: 10px 40px; background: #dddddd;width: 350px;border-radius: 30px 28px 26px 24px / 29px 27px 25px 23px;}span {display: block;text-align: center;border: 2px solid #a1a1a1;padding: 10px 40px; background: #dddddd;width: 350px;border-top-left-radius: 30px 29px;border-top-right-radius: 28px 27px;border-bottom-right-radius: 26px 25px;border-bottom-left-radius: 24px 23px;}</style></head><body><div>border-radius属性允许您向元素添加圆角。</div><br /><span>border-radius属性允许您向元素添加圆角。</span></body>
</html>

6.5.2. 效果图

7. 边框阴影

7.1. box-shadow属性向框添加一个或多个阴影。

7.2. 语法

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

7.3. box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表, 每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。

7.4. 默认值

7.5. 可能值

7.6. 例子

7.6.1. 代码

<!DOCTYPE html>
<html><head><title>box-shadow属性创建边框阴影</title><meta charset="utf-8" /><style type="text/css">div {width: 300px;height: 100px;background-color: #ff9900;box-shadow: 10px 10px 5px 1px #888888;}</style></head><body><div></div></body>
</html>

7.6.2. 效果图

8. 创建图片边框--使用图片

8.1. border-image-source属性规定要使用的图像。

8.2. 默认值

8.3. 可能值

9. 创建图片边框--向内偏移

9.1. border-image-slice属性规定图像边框的向内偏移。

9.2. 该属性规定图像的上、右、下、左侧边缘的向内偏移, 图像被分割为九个区域: 四个角、四条边以及一个中间区域。

9.3. 该属性可以设置5个参数, 前1~4个参数是按照上、右、下、左的位置分割图片。第五个参数fill, 否则中间的图像部分会被丢弃。如果省略第四个数值, 则与第二个值相同。如果省略第三个值, 则与第一个值相同。如果省略第二个值, 则与第一个值相同。

9.4. 默认值

9.5. 可能值

10. 创建图片边框--图像边框的宽度

10.1. border-image-width属性规定图像边框的宽度。

10.2. 该属性可以设置4个值, 按照上、右、下、左的位置设置图像边框的宽度。如果忽略第四个值, 则与第二个值相同。如果省略第三个值, 则与第一个值相同。如果省略第二个值, 则与第一个值相同。不允许任何负值作为 border-image-width值。

10.3. 默认值

10.4. 可能值

11. 创建图片边框--图像超过边框盒的量

11.1. border-image-outset属性规定边框图像超过边框盒的量。

11.2. 该属性可以设置4个值, 按照上、右、下、左的位置设置边框图像超过边框盒的量。如果忽略第四个值, 则与第二个值相同。如果省略第三个值, 则与第一个值相同。如果省略第二个值, 则与第一个值相同。

11.3. 默认值

11.4. 可能值

12. 创建图片边框--图像边框平铺、拉伸

12.1. border-image-repeat属性规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded)。

12.2. 该属性可以设置两个参数, 第一个值代表水平方向, 第二个值代表垂直方向。如果只设置一个参数, 代表四个方向一样。

12.3. 默认值

12.4. 可能值

13. 创建图片边框

13.1. border-image属性是一个简写属性, 用于设置以下属性: border-image-source、border-image-slice和border-image-repeat。

13.2. 所有的创建图片边框属性在使用之前都必须设置边框宽度。

13.3. 默认值

13.4. 可能值

13.5. 例子

13.5.1. 代码

<!DOCTYPE html>
<html><head><title>border-image属性创建边框图片</title><meta charset="utf-8" /><style type="text/css">* {margin: 0;padding: 0;}span {margin: 80px;border: 26px solid transparent;display: inline-block;line-height: 26px;background-color: red;}#round {border-image: url('border.png') 26 26 26 26 fill round;}#stretch {border-image-source: url('border.png');border-image-slice: 26 26 26 26;border-image-width: 0.5 1 2 4;border-image-outset: 1 9 5 3;border-image-repeat: repeat stretch;}</style></head><body><span id="round">创建图片边框</span><span id="stretch">创建图片边框</span><br /><br /><br /><br /><br /><p>这是我们使用的图片:</p><img src="border.png" alt="border.png" /></body>
</html>

13.5.2. 效果图

039_CSS3边框相关推荐

ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
无边框窗体和用户控件以及权限
无边框窗体: 就是吧窗体的边框去掉,然后自己做按钮设置功能. 无边框窗体的移动: 将下面代码直接复制粘贴,将窗体的鼠标按下事件的方法改成下面方法的名字就可以直接使用 1 //窗体移动API 2 [Dl ...
css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
几种和边框相关的CSS样式修改
/*去掉边框线轮廓*/ :focus {outline: none !important; } /*Chrome默认边框样式*/ :focus {outline: -webkit-focus-ring ...
转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）...
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
birt报表表格边框_手把手教你五步制作出一张领导驾驶舱报表
领导驾驶舱报表是一款为企业内部领导及相关高管提供企业数据指标分析的报表,用来实时反映企业的运行状况,将企业管理决策提升到一个新的高度. 今天小编用亿信华辰的亿信ABI给大家实际演示,通过5个步骤就可以 ...
qt 单元格加上边框_Excel如何自动添加边框？学会这个方法效率加倍！
平常大家在工作中,有时候是不是需要给Excel表格加上边框啊?那么今天我们就来聊聊Excel表格添加边框线条那些事. 大家给Excel表格添加好边框后,之后在录入数据的时候,是不是总会出现以下这个问题 ...
CSS之布局（盒子模型—边框）
盒子模型-边框: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
录制短视频的录制按钮边框计时效果
项目增加录制短视频功能, 需一录制功能按钮, 使用贝塞尔曲线结合shapelayer绘制按钮边框的计时功能代码如下: #import "YGRecordView.h" #defi ...

039_CSS3边框

039_CSS3边框相关推荐

最新文章

热门文章