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) 这个伪类选中父元素下 ...
随机推荐
- Kali 2019(debian linux)安装MySql5.7.x
Kali 2019(debian linux)安装MySql5.7.x MySQL安装 确认是否安装MySQL 终端输入:mysql 如出现Welcome to the MariaDB monitor ...
- k8s维护常用命令
k8s维护 1. 不可调度 kubectl cordon k8s-node-1 kubectl uncordon k8s-node-1 #取消 2.驱逐已经运行的业务容器 kubectl drain ...
- EF执行存储过程(转载)
https://blog.csdn.net/xiaouncle/article/details/82914255 相关文章: https://www.cnblogs.com/Coder-ru/arch ...
- Linux 应用程序的安装和管理
在Linux中,有三种安装软件的方式,分别是RPM包安装.YUM源安装.源代码编译安装. 常见应用程序目录结构 类型 路径 普通用户可执行文件 /usr/bin 管理员可执行文件 /usr/sbin ...
- pyecharts绘制geo地图
pyecharts是一种非常强大的绘图python库,绘制的图形非常好看,并且有代表性,不仅仅是地图,还可以绘制条形图.饼图.词云图等等. # 安装方法 pip install pyecharts # ...
- Linux操作系统的计划任务
Linux操作系统的计划任务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.任务计划概述 Linux任务计划.周期性任务执行 未来的某时间点执行一次任务: at: 指定时间点, ...
- 《TensorFlow2深度学习》学习笔记（四）对笔记二中的模型增加正确率展示
全部代码如下:(红色部分为与笔记二不同之处) #1.Import the neccessary libraries needed import numpy as np import tensorflo ...
- kali 攻击wordpress + trunkey linux wordpress 安装方法
Kali-linux攻击WordPress和其他应用程序 今天越来越多的企业利用SAAS(Software as a Service)工具应用在他们的业务中.例如,他们经常使用WordPress作 ...
- gcc的__builtin_函数（注意前面是两个下划线）
说明: GCC provides a large number of built-in functions other than the ones mentioned above. Some of t ...
- 深入理解JVM内存分配和常量池
一.虚拟机的构成 虚拟结主要由运行时数据区.执行引擎.类加载器三者构成: 而我们所说的JVM内存模型指的就是运行时数据区,下面具体分析一下运行时数据区: 二.运行时数据区组成和各个区域的作用 我们看到 ...