CSS3(1)---圆角边框、边框阴影
圆角边框、边框阴影
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)---圆角边框、边框阴影的更多相关文章
- css3新增边框、阴影、边框、背景、文本、字体
css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...
- (一一九)通过CALayer实现阴影、圆角、边框和3D变换
在每个View上都有一个CALayer作为父图层,View的内容作为子层显示,通过layer的contents属性决定了要显示的内容,通过修改过layer的一些属性可以实现一些华丽的效果. [阴影和圆 ...
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正 ...
- CSS(五)- 背景与边框 - 边框圆角与阴影基础用法
扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...
- 第50天学习打卡(CSS 圆角边框 盒子阴影 定位)
4.4圆角边框 圆角边框: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- (转)利用 SVG 和 CSS3 实现有趣的边框动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 【转】Android开发笔记——圆角和边框们
原文地址:http://blog.xianqu.org/2012/04/android-borders-and-radius-corners/ Android开发笔记——圆角和边框们 在做Androi ...
- CSS——小三角带边框带阴影
乍一看,很简单,做小三角,首先想到的是利用border的transparent特性,可以制作出小三角的效果.但是注意,这个小三角本身就是边框制作出来的.怎么能在小三角的外边再加一层小边框呢.那就必须再 ...
- UIButton设置圆角和边框及边框颜色
1. 按钮边框颜色 //设置边框颜色 [btn.layer setMasksToBounds:YES]; [btn.layer setCornerRadius:10.0]; //设置矩形四个圆角半径 ...
- CSS3实现半像素边框
一.思路 普通的1px黑色实线边框: border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px(没测试过,可能会被解析成1或者0),border-width的值只 ...
随机推荐
- NOIP 模拟22
这次考试真的是像教练说的真的挺难的,但是人家rank1还是100+, 但是咕咕蛊!
- Markdown基本语法小结
目录 Typore Markdown基本语法 1.标题 一级标题 二级标题 三级标题 2.字体加粗 3.斜体 4.文本高亮 5.上标 6.下标 7.引用代码 1 8.代码引用2 9.代码引用3 10. ...
- 003.Kubernetes二进制部署准备
一 前置准备 1.1 前置条件 相应的充足资源的Linux服务器: 设置相应的主机名,参考命令: hostnamectl set-hostname k8smaster Mac及UUID唯一: 若未关闭 ...
- CAS3.5.2 Server登录后返回用户信息详细解决方案
单点登录(Single Sign-On, 简称SSO)是目前比较流行的服务于企业业务整合的解决方案之一,SSO使得在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.大家在使用时CA ...
- ASP.NET Core 1.0: Using Entity Framework Core
伴随着ASP.NET Core 1.0发布的还有Entity Framework Core 1.0; 官方文档链接:https://docs.efproject.net/en/latest/platf ...
- iOS:应用程序扩展开发之Today扩展(Today Extesnsion)
一.简介 iOS应用程序扩展是苹果在iOS8推出的一个新特性,可以将自定义的功能和内容扩展到应用程序之外,在之后又经过不断地优化和更新,已经成为开发中不可或缺的功能之一.扩展也是一个Target项目, ...
- 忘记Linux登录密码的破解方法
注意:1.破解方式只限于7.0以后的Linux系统. 2.要注意自己linux系统中有没有开启selinux,如果开启则在后面要建一个名为:autorelabel的隐藏文件. 1.启动Linu ...
- BeautifulSoup随笔
BeautifulSoup是一个类 b = BeautifulSoup(html) b对象有与html结构相关的各种方法和和属性. a = b.findAll('a')获得标签的对象 a对象又有关于属 ...
- SQLite性能 - 意想不到,但又情理之中的测试结果。
win7(64) sata2 希捷 MINGW32_NT-(/) cat: /proc/cpuinfo: No such file or directory ------ in disk ---- r ...
- opencv HSV找颜色,找轮廓用最小旋转矩形框出
#include <opencv2/opencv.hpp> #include<iostream> #include<string> using namespace ...