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 ...
- nyoj 96 一个水题目
虽然很简单,发现自己用内存太高了了,算了,我就是这水平了. 描述 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2)位的整数,则求出w的后n-1位的数. 输入 第一行为M,表示 ...
- POJ2739 - Sum of Consecutive Prime Numbers(素数问题)
题目大意 给定N,要求你计算用连续的素数的和能够组成N的种数 题解 先筛选出素数,然后暴力判断即可... 代码: #include<iostream> #include<cstrin ...
- Java NIO 缓冲技术详解
缓冲区(buffer)是从即将写入通道(channel)或刚刚从通道中读出的一段数据.它是一个持有数据,并扮演NIO通道端点的对象.缓冲区为数据访问和读写过程提供正式机制. 它是NIO和老版Java ...
- Block介绍(一)基础
一.概述 Block是C级别的语法和运行时特性.Block比较类似C函数,但是Block比之C函数,其灵活性体现在栈内存.堆内存的引用,我们甚至可以将一个Block作为参数传给其他的函数或者Block ...
- hdoj 1237 简单计算器
简单计算器 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- 【python自动化第八篇:网络编程】
一.拾遗 动态导入模块 目的是为了在导入模块的过程中将模块以字符的格式导入. #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:wanghui ...
- Java多重if....else if
public class HelloWorld { public static void main(String[] args) { int age=25; if(age>60){ System ...
- C++里面方便的打印日志到文件
ofstream write; //write只是个名字 你可以定义为任何其他的名字 write.open("D:\prj\Robot\dev\face\facerecog\facereco ...
- Activity 的启动模式
好久没用过那几种activity的启动模式了,如今看到singletop竟然傻了眼,完全忘记了这几种启动模式的区别!隧将两年前的总结翻出来,通读一遍那晦涩难懂的记录,又理解了一遍,在以前记录的基础上, ...