圆角边框、边框阴影

CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。

一、圆角边框

圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。

1、圆角边框语法

圆角边框属性 : border-radius

属性值

border-radius: 属性1，属性2，属性3，属性4

# 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

border-radius: 属性1，属性2，属性3

# 三个值：上->左右->下

border-radius: 属性1，属性2

# 两个值：上下->左右

border-radius: 属性1

# 一个值：四个圆角值相同

对于每个边角也可以单独写

border-top-left-radius:10px;      // 定义了左上角的弧度半径为10px

border-top-right-radius:5px;      // 定义了右上角的弧度5px;

border-bottom-right-radius:10px;  // 定义了右下角的弧度

border-bottom-left-radius:10px;   // 定义了左下角的弧度

2、示例

1）画圆弧

<!DOCTYPE html>

<html>

<head>

	<title></title>

 <style type="text/css">

div {

	width: 200px;

	height: 200px;

	background: pink;

	border-radius: 50px;

}

 </style>

</head>

<body>

    <div></div>

</body>

</html>

运行结果

很明显，这里四个圆弧的半径都为50px；

2）画圆

画圆的思路其实很简单,只要保证两点

1、盒子的长和宽要相等

2、圆弧的半径要为盒子长的一半

比如将上面属性修改为：

border-radius: 100px;

再运行

很明显这里已经是一个圆了。这里我们来思考为什么要设置圆弧设置盒子长的一半。

其实很简单，要实现圆，那么长和宽就应该相等，同时它们的长度就是直径,那么一半就是半径了。

二、边框阴影

除了可以为元素的四周设置倒圆角以外,CSS3还为我们提供了阴影的功能,能够制作更为精美的外观。

1、边框阴影语法

语法

box-shadow: h-shadow v-shadow blur spread color inset;

# 前两个属性是必须写的。其余的可以省略。

属性值

2、示例

示例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>盒子阴影</title>

	<style>

	div {

		width: 200px;

		height: 200px;

		box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);

		/*transition: all 1s;*/

	}

	div:hover {  /*鼠标经过div时候的样子。。。*/

		box-shadow: 0 15px 30px rgba(255,0,0,0.5);

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

运行结果






```
你如果愿意有所作为，就必须有始有终。(15)
```

CSS3(1)---圆角边框、边框阴影的更多相关文章

  1. css3新增边框、阴影、边框、背景、文本、字体

    css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...

  2. （一一九）通过CALayer实现阴影、圆角、边框和3D变换

    在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...

  3. css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

    首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正 ...

  4. CSS（五）- 背景与边框 - 边框圆角与阴影基础用法

    扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...

  5. 第50天学习打卡（CSS 圆角边框 盒子阴影 定位）

    4.4圆角边框 圆角边框:  <!DOCTYPE html> <html lang="en"> <head>     <meta char ...

  6. （转）利用 SVG 和 CSS3 实现有趣的边框动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. 【转】Android开发笔记——圆角和边框们

    原文地址:http://blog.xianqu.org/2012/04/android-borders-and-radius-corners/ Android开发笔记——圆角和边框们 在做Androi ...

  8. CSS——小三角带边框带阴影

    乍一看,很简单,做小三角,首先想到的是利用border的transparent特性,可以制作出小三角的效果.但是注意,这个小三角本身就是边框制作出来的.怎么能在小三角的外边再加一层小边框呢.那就必须再 ...

  9. UIButton设置圆角和边框及边框颜色

    1. 按钮边框颜色 //设置边框颜色 [btn.layer setMasksToBounds:YES]; [btn.layer setCornerRadius:10.0]; //设置矩形四个圆角半径 ...

  10. CSS3实现半像素边框

    一.思路 普通的1px黑色实线边框: border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px(没测试过,可能会被解析成1或者0),border-width的值只 ...

随机推荐

  1. 11、pytest -- 测试的参数化

    目录 1. @pytest.mark.parametrize标记 1.1. empty_parameter_set_mark选项 1.2. 多个标记组合 1.3. 标记测试模块 2. pytest_g ...

  2. 『题解』洛谷P1351 联合权值

    更好的阅读体验 Portal Portal1: Luogu Portal2: LibreOJ Description 无向连通图\(\mathrm G\)有\(n\)个点,\(n - 1\)条边.点从 ...

  3. NLP-BM25算法理解

    前两天老师给我们讲解了BM25算法,其中包括由来解释,以及算法推导,这里我再将其整理,这里我不讲解之前的BIM模型,大家有兴趣可以自行了解.Okapi BM25:一个非二值的模型bm25 是一种用来评 ...

  4. layaair和egret的区别

    egret缺点1 编译速度非常慢 2 就是强类型转换非常的麻烦 3 只能用ts 所以只能用他们的IDE 不能用sublime layaair唯一不足的就是 insepct太垃圾 占用游戏界面 所以建议 ...

  5. css3 svg路径蒙版动画

    css3 svg路径蒙版动画 具体看https://www.cnblogs.com/oubenruing/p/9568954.html 还有个更好控制的写法<pre><!DOCTYP ...

  6. 深入理解计算机系统 第二章 信息的表示和处理 part1

    欣哥划的重点: 第二章比较难,建议至少掌握下面几个知识点: 1. 字节顺序 : 大端和小端 2. 运行 图2-24, 图2-25程序 show-bytes.c 观察结果,看看有什么问题 3. 理解布尔 ...

  7. PHP 核心特性 - 命名空间

    提出 在命名空间提出之前,不同的组件很容易碰到命名的冲突,例如 Request .Response 等常见的命名.PHP 在 5.3 后提出了命名空间用来解决组件之间的命名冲突问题,主要参考了文件系统 ...

  8. 技术人如何利用 github+Jekyll ，搭建一个独立免费的技术博客

    上次有人留言说,技术博客是程序员的标配,但据我所知绝大部分技术同学到现在仍然没有自己的技术博客.原因有很多,有的是懒的写,有的是怕写不好,还有的是一直想憋个大招,幻想做到完美再发出来,结果一直胎死腹中 ...

  9. hdu 1325 Is It A Tree? (树、node = edge + 1、入度 <= 1、空树)

    Is It A Tree?Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  10. nyoj 113-字符串替换 (python replace, try ... except)

    113-字符串替换 内存限制:64MB 时间限制:3000ms 特判: No 通过数:31 提交数:71 难度:2 题目描述: 编写一个程序实现将字符串中的所有"you"替换成&q ...