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) 这个伪类选中父元素下 ...
随机推荐
- php 数组去空
1.preg_grep("/\S+/i", $data); 2.array_filter($data); 3.for($data $k = > $v) { if(!$v) u ...
- 关于定义变量名为"name"的坑！！！
昨天下午没有什么工作可做,闲来无事就上博客园看看了,有个问题让我一直很纳闷. 直接上代码吧: 再用表达式创建函数时遇到的问题,这里的代码按照正常逻辑只有那个在变量定义后面的函数执行打印的值才是&quo ...
- 把项目中的vant UI组件升级
首先把之前 的VANT 卸载掉 npm uninstall vant 然后重新安装 一次vant npm i vant -S
- redis设置远程连接
1.修改redis服务器的配置文件 本机安装的redis-4.0.14默认的配置文件 redis.conf 设置 绑定本机地址:bind 127.0.0.1 开启保护模式:protected-mode ...
- Swagger Liunx环境搭建（亲测百分百可用）
一.安装nodejs 下载编译好的nodejs安装包,下载地址: https://nodejs.org/dist/v10.10.0/ (作者下载的10.10.0,可根据自己需要下载不同版本) 将下载好 ...
- 【转载】Linux磁盘管理：LVM逻辑卷管理
Linux学习之CentOS(二十五)--Linux磁盘管理:LVM逻辑卷基本概念及LVM的工作原理 这篇随笔将详细讲解Linux磁盘管理机制中的LVM逻辑卷的基本概念以及LVM的工作原理!!! 一. ...
- sql server快捷键添加
工具--选项--键盘 sp_table_column_info p_helpindex sp_sql
- win7安装小米8驱动
首先尝试了小米助手,安装后提示说要会弹窗然后选择确定,但是并没有弹窗:尝试管理员方式运行,依然没有弹框.差评. 正确的姿势是:http://bigota.d.miui.com/tools/xiaomi ...
- Linux必知必会--curl
你有多自律,你就能走多远~ --久节奏.慢读书 Curl命令 学习每个linux命令都该掌握man命令.(可以使用man命令去查看每个命令的使用说明) curl命令是一个利用URL规则在命令行下工作的 ...
- X.509
参考:https://baike.baidu.com/item/X.509/2817050?fr=aladdin 标题:X.509 百度百科 在密码术中,X.509是定义公用密钥证书格式的标准. X ...