css3学习之--伪类与圆角
随着css3.0的发布到逐渐完善，目前已经大部分浏览器已经能较好地适配，所以写一些css3的学习经历，分享心得，主要以案例讲解为主，话不多说，今天以css3的新增的“圆角”属性来讲解，基于web画一个“安卓机器人”。
一.理解border-radius属性
border-radius-top-left /*左上角*/
border-radius-top-right /*右上角*/
border-radius-bottom-right /*右下角*/
border-radius-bottom-left /*左下角*/
//提示：按顺时针方式
下面用几个实例来展示border-radius的具体用法。
<style>
.container{
width: 600px;
height: 600px;
margin: 50px auto;
}
.res{
width: 100px;
height: 100px;
background: #FF0000;
border-radius: 10px;/*设置四个角的弧度为10px*/
float: left;
margin-left: 30px;
}
.half-circle{
width: 100px;
height: 50px;/*如果是半圆的话，这里高度应该是宽度的一半*/
background: #FF0000;
border-radius: 50px 50px 0 0;/*设置上方两个的弧度为50px，即为height的高度，以下四个参数，顺时针方向分别为左上角，右上角，右下角，左下角*/
float: left;
margin-left: 30px;
}
.circle{
width: 100px;
height: 100px;
background: #FF0000;
border-radius: 50px;/*设置四个角的弧度为50px，即为height的高度*/
float: left;
margin-left: 30px;
}
</style>
<body>
<div class="container">
<div class="res"></div>
<div class="half-circle"></div>
<div class="circle"></div>
</div>
</body>
效果如下：
我想，通过代码都能大概了解border-radius的基础用法了吧。
那么接下来就来学习一下伪元素::before，::after。
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
举例：在某类选择器前后添加样式，就可以使用:before伪元素，如下：
<style>
.en_header::before,
.en_header::after{
/*一定要设置content属性，相对于将伪元素=display：block*/
content: "";
width: 10px;
height: 10px;
border-radius: 75px；
background-color:#ffffff;
}
</style>
那么大概了解以下伪元素后就来画安卓机器人吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Android机器人</title>
<style>
.container{
width: 300px;
height: 350px;
border: 1px solid #FBB450;
margin: 60px auto;
}
.en_header{
width: 150px;
height: 75px;
background-color: #008B69;
margin: 20px auto;
border-radius: 75px 75px 0 0;
position: relative;
}
.en_header::before,
.en_header::after{
/*一定要设置content属性*/
content: "";
width: 10px;
height: 10px;
border-radius: 75px;
position: absolute;
top: 50px;
background-color:#ffffff;
}
.en_header::before{
left: 30px;
}
.en_header::after{
right: 30px;
}
.en_body{
width: 150px;
height: 150px;
background-color: #008B69;
margin: 0 auto;
margin-top: -10px;
border-radius: 0 0 10px 10px;
position: relative;
}
.en_body::before,
.en_body::after{
/*一定要设置content属性*/
content: "";
width: 15px;
height: 100px;
border-radius: 5px;
position: absolute;
top: 10px; background-color:#008B69;
}
.en_body::before{
left: -20px;
}
.en_body::after{
right: -20px;
}
.en_footer{
width: 150px;
height: 70px;
margin: 0 auto;
margin-top: -10px;
position: relative;
}
.en_footer::before,
.en_footer::after{
/*一定要设置content属性*/
content: "";
width: 15px;
height: 70px;
border-radius: 0 0 5px 5px;
position: absolute;
left: 30px;
background-color:#008B69;
}
/*.en_footer::before{
left: 30px;
}*/
.en_footer::after{
left: 105px;
}
</style>
</head>
<body>
<div class="container">
<div class="en_header"></div>
<div class="en_body"></div>
<div class="en_footer"></div>
</div>
</body>
</html>
效果如下：
css3学习之--伪类与圆角的更多相关文章
- CSS3学习笔记——伪类hover
最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...
- ::before ::after CSS3中的伪类和伪元素
::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:fo ...
- CSS3的一个伪类选择器:nth-child()
CSS3的一个伪类选择器“:nth-child()”. Table表格奇偶数行定义样式: 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了.很可惜,据我 ...
- CSS3中的伪类选择器详解
类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...
- 深入学习css伪类和伪元素及其用法
前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...
- css3中的伪类选择器
一.动态伪类 动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",&qu ...
- css3怎么分清伪类和伪元素
伪类用于向某些选择器添加特殊的效果. 伪元素用于将特殊的效果添加到某些选择器. 伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lan ...
- css3中关于伪类的使用
目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...
- css3之新增伪类
css3新增了许多伪类,但是IE8以及更低版本的IE浏览器不支持css3伪类,所以在使用时要是涉及到布局等意象全局的样式,应该多考虑一下. 1.elem:nth-child(n) 这个伪类选中父元素下 ...
随机推荐
- Flask入门很轻松（三）—— 模板
Jinja2模板引擎 转载请在文章开头附上原文链接地址:https://www.cnblogs.com/Sunzz/p/10959471.html Flask内置的模板语言,它的设计思想来源于 Dja ...
- ExecutorService java多线程分割list运行
调用方法 int threadNum = 7; while(true) { List<FaceAnalyseImage> list = faceAnalyseImageMapper.sel ...
- spring boot项目打包成jar后请求访问乱码解决
在启动jar的时候添加一个配置 -Dfile.encoding=utf-8 java -Dfile.encoding=utf-8 -jar xxxxtest-0.1.jar
- Welcome to GnuPG 2.2
Welcome to GnuPG 2.2 Installation Instructions Double click the Install package to install GnuPG 2.2 ...
- Java线程状态、线程start方法源码、多线程、Java线程池、如何停止一个线程
下面将依次介绍: 1. 线程状态.Java线程状态和线程池状态 2. start方法源码 3. 什么是线程池? 4. 线程池的工作原理和使用线程池的好处 5. ThreadPoolExecutor中的 ...
- CentOS7：sorry,that didn't work.please try again！
参考以下解决方案,重点是vi etc/selinux/config 把 enforcing 改为 disable 应用场景 linux管理员忘记root密码,需要进行找回操作.注意事项:本文基于cen ...
- Backpressure & Elastic Scaling
spark.streaming从不稳定到稳定状态,解决数据量接收数据时突然变大,使得无法及时处理数据,稳定性得到保证 开启方式: spark.streaming.backpressure.enable ...
- oracle数据库(四)
子查询与高级查询 我们在检索数据库的时候,需要将多个表关联起来进行查询,最常用的有子查询.连接查询和集合查询,子查询可以从另外一个表获取数据,连接查询可以指定多个表的连接方式,集合查询可以将两个或者多 ...
- tensorflow API _ 5 (tensorflow.summary)
tensorflow的可视化是使用summary和tensorboard合作完成的. 基本用法 首先明确一点,summary也是op. 输出网络结构 with tf.Session() as sess ...
- Logistic Regression Algorithm
逻辑回归算法LR. 简介 逻辑回归是机器学习从统计学领域借鉴的另一种技术.它是二进制分类问题的首选方法(有两个类值的问题). Logistic回归就像线性回归,目标是找到权重每个输入变量的系数值. ...