CSS边框属性一---border-radius
1、CSS outline 属性
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
p
{
outline:#00FF00 dotted thick;
}
2、CSS border-radius 属性
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
例子1:一个参数的时候
border-radius:2em;
等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
如图:
例子2:两个参数的时候
border-radius:2em 5em;
/*左上角和右下角为2em圆弧,右上角和左下角为5em圆弧*/
等价于
border-top-left-radius:2em;
border-top-right-radius:5em;
border-bottom-right-radius:2em;
border-bottom-left-radius:5em;
如图:
例子3:三个参数的时候
border-radius:2em 5em 8em;
/*左上角为2em圆弧,右上角和左下角为5em圆弧,右下角为8em圆弧*/
等价于
border-top-left-radius:2em;
border-top-right-radius:5em;
border-bottom-right-radius:8em;
border-bottom-left-radius:5em;
如图:
例子4:四个参数的时候
border-radius: 2em 1em 5em 4em;
等价于
border-top-left-radius: 2em;
border-top-right-radius: 1em;
border-bottom-right-radius: 5em;
border-bottom-left-radius: 4em;
如图:
例子5:带斜杠 / 的时候
border-radius: 2em 1em 5em 4em / 0.5em 3em 2em 4em;
/*以斜杠 / 分开后面的参数的意思是:第一个参数表示圆角的水平半径,第二个参数表示圆角的垂直半径,这样可以画一个不对称的圆角辣*/
等价于
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 5em 2em;
border-bottom-left-radius: 4em 4em;
如图:
通常我们很少写斜杠 / 右边的参数,那就是默认右边等于左边的值。你也可以省略一些值,比如这样子写
border-radius: 2em 1em 4em / 0.5em 3em;
解析顺序你就可以按照上面的自己推算一下啦。
3、CSS border-shadow 属性
box-shadow 属性向框添加一个或多个阴影。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
CSS边框属性一---border-radius的更多相关文章
- CSS .css边框属性(border)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS边框属性
边框 圆角 border-radius border-top-left-radius border-top-right-radius border-bottom-left-radlius border ...
- CSS边框-属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 第2章 css边框属性
圆角效果 border-radius border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border- ...
- CSS边框属性二---border-images
border-images 属性 主要用border-images 属性来制作自适应按钮和tab标签&自适应边框. 例子: border-images:url("img.png&qu ...
- CSS 边框(border)实例
CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...
- css之属性部分
这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...
- CSS 边框
CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style 值: ...
- 用CSS边框图像让你的网站更漂亮
不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...
随机推荐
- 【CSS3】Advanced9:Transformation
1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:ma ...
- classLoader (一)
不说废话,上代码吧. 随便写一个类,他是由appclassLoader加载的 package classLoaderExample; class Bean { public void test() { ...
- A Tour of Go For continued
As in C or Java, you can leave the pre and post statements empty. package main import "fmt" ...
- bzoj1095: [ZJOI2007]Hide 捉迷藏 线段树维护括号序列 点分治 链分治
这题真是十分难写啊 不管是点分治还是括号序列都有一堆细节.. 点分治:时空复杂度$O(n\log^2n)$,常数巨大 主要就是3个堆的初始状态 C堆:每个节点一个,为子树中的点到它父亲的距离的堆. B ...
- C# webkit.net的简单使用
webkit.net 0.5下载地址https://sourceforge.net/projects/webkitdotnet/files/WebKit%20.NET%200.x/0.5/WebK ...
- C#基础知识-对象初始化顺序
本文章转载:http://blog.csdn.net/forever_wind/article/details/7442503 不错的文章:http://www.cnblogs.com/McJerem ...
- 利用...来字符检測(swift)
利用...来字符检測(swift) by 伍雪颖 let test = "LesvIo" let interval = "a"..."z" ...
- 2016iweb峰会参会总结
2016年8月27日去国家会议中心参加iweb峰会. 8点半开始签到入场,8点20分排队签到的人已经排到另一个门口,人超级多啊. 9点一如既往的由h5女神娜姐开场. 上午场 基本是各公司的大佬们介绍各 ...
- ie6的兼容总结
ie6的兼容处理总结 1.透明背景图: .timer { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my.png ...
- WinForm界面(一)
一:Form对象 属性: 设计中的Name:窗体类的类名AcceptButton:窗口的确定按钮CancelButton:窗口按ESC的取消按钮 1.外观 Backcolor:背景颜色Forecolo ...