Html中的边框弧边,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 .css边框属性(border)

CSS 边框(border)实例

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

css之属性部分

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

CSS 边框

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

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

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

随机推荐

图解Storm

问题导读:1.你认为什么图形可以显示hadoop与storm的区别?(电梯)2.本文是如何形象讲解hadoop与storm的?(离线批量处理.实时流式处理)3.hadoop map/reduce对应s ...

数迹学——Asp.Net MVC4入门指南(4)：添加一个模型

一.添加模型类 二.添加MovieDBContext类,连接数据库 DbContext类继承自 System.Data.Entity; 负责在数据库中获取,存储,更新,处理实例 MovieDBCont ...

TYVJ P1029 牛棚回声 Label：坑

背景 USACO OCT09 3RD 描述 奶牛们灰常享受在牛栏中牟叫,因為她们可以听到她们牟声的回音.虽然有时候并不能完全听到完整的回音.Bessie曾经是一个出色的秘书,所以她精确地纪录了所有的牟 ...

robotframework笔记17

执行测试用例 基本用法 机器人框架从命令行执行测试用例,和 最终的结果是,在默认情况下,一个 输出文件 以XML格式和一个HTML 报告 和 日志 . 执行后,可以组合和输出文件 否则 进行后期处理  ...

GCC,GDB,Makefile和IO复用函数

2015.1.22 c高级的环境搭建:GCC编译器:全称 GNU CC,是GNU工具(tool chain)的一种,源码编译成机器码,gcc的编译依赖于很多小工具4.3.3和3.4.3版本的比较稳定 ...

Could not launch "app_name"

真机测试 不报错 编译通过后 Xcode总出这个错 process launch faild:NotFound-------解决办法 :重启设备

桶排序-Node.js

, , , , ]; var a = [], i; ; i < b.length; i++) { var num = b[i]; a[num] = a[num]||; a[num] ++; nu ...

【小丸类库系列】Excel操作类

using Microsoft.Office.Interop.Excel; using System; using System.IO; using System.Reflection; namesp ...

JavaScript面向对象轻松入门之继承&lpar;demo by ES5、ES6&rpar;

继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实 ...

VUE2 项目 引入 leaflet&period;draw全过程

leaflet.draw的参考文档:http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html   这个网址不稳定,多刷新几 ...