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的更多相关文章

  1. CSS .css边框属性(border)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS边框属性

    边框 圆角 border-radius border-top-left-radius border-top-right-radius border-bottom-left-radlius border ...

  3. CSS边框-属性详解

    图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  4. 第2章 css边框属性

    圆角效果 border-radius border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border- ...

  5. CSS边框属性二---border-images

    border-images 属性 主要用border-images 属性来制作自适应按钮和tab标签&自适应边框. 例子: border-images:url("img.png&qu ...

  6. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  7. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  8. CSS 边框

    CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border-style 值: ...

  9. 用CSS边框图像让你的网站更漂亮

    不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...

随机推荐

  1. 【CSS3】Advanced9:Transformation

    1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:ma ...

  2. classLoader (一)

    不说废话,上代码吧. 随便写一个类,他是由appclassLoader加载的 package classLoaderExample; class Bean { public void test() { ...

  3. A Tour of Go For continued

    As in C or Java, you can leave the pre and post statements empty. package main import "fmt" ...

  4. bzoj1095: [ZJOI2007]Hide 捉迷藏 线段树维护括号序列 点分治 链分治

    这题真是十分难写啊 不管是点分治还是括号序列都有一堆细节.. 点分治:时空复杂度$O(n\log^2n)$,常数巨大 主要就是3个堆的初始状态 C堆:每个节点一个,为子树中的点到它父亲的距离的堆. B ...

  5. C# webkit.net的简单使用

      webkit.net 0.5下载地址https://sourceforge.net/projects/webkitdotnet/files/WebKit%20.NET%200.x/0.5/WebK ...

  6. C#基础知识-对象初始化顺序

    本文章转载:http://blog.csdn.net/forever_wind/article/details/7442503 不错的文章:http://www.cnblogs.com/McJerem ...

  7. 利用...来字符检測(swift)

    利用...来字符检測(swift) by 伍雪颖 let test = "LesvIo" let interval = "a"..."z" ...

  8. 2016iweb峰会参会总结

    2016年8月27日去国家会议中心参加iweb峰会. 8点半开始签到入场,8点20分排队签到的人已经排到另一个门口,人超级多啊. 9点一如既往的由h5女神娜姐开场. 上午场 基本是各公司的大佬们介绍各 ...

  9. ie6的兼容总结

    ie6的兼容处理总结 1.透明背景图: .timer { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my.png ...

  10. WinForm界面(一)

    一:Form对象 属性: 设计中的Name:窗体类的类名AcceptButton:窗口的确定按钮CancelButton:窗口按ESC的取消按钮 1.外观 Backcolor:背景颜色Forecolo ...