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&rpar；实例
CSS 边框(border)实例：元素的边框 (border) 是围绕元素内容和内边距的⼀条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜⾊. CSS 边框属性属性 描述bo ...
css之属性部分
这篇写的是今天的学习到的属性,⼀共20个. 属性再多，但也要会使⽤，会在使⽤时可以记起它，才能起到它为我们所需要的作⽤. 样式属性
border radius什么意思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⾯向对象轻松⼊门之继承(demo by ES5、ES6)
继承是⾯向对象很重要的⼀个概念，分为接⼝继承和实现继承，接⼝继承即为继承某个对象的⽅法，实现继承即为继承某个对象的属
性.JavvaScript通过原型链来实现接⼝继承.call()或apply()来实 ...
VUE2 项⽬ 引⼊ leaflet.draw全过程

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。