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) 这个伪类选中父元素下 ...
随机推荐
- webpack练手项目之easySlide（二）：代码分割
Hello,大家好. 在上一篇 webpack练手项目之easySlide(一):初探webpack 中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但 ...
- JAVA导出excel 直接弹出下载框
转自:https://blog.csdn.net/qq_38423105/article/details/80782283 效果展示: 1.首先准备jar包 <dependency> ...
- linux技能四 用户管理
用户管理:用户类型,添加用户,修改用户,删除用户,查看用户信息,用户的切换,添加组,修改组,删除组,查看组 用户类型:超级用户:root,UID=1 系统用户:运行系统服务的,不能登陆的,UID=(1 ...
- java-Java实现mysql事务处理操作
数据库事务(简称:事务)是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成. 并非任意的对数据库的操作序列都是数据库事务.数据库事务拥有以下四个特性,习惯上被称之为ACID特性. ...
- Vue+Django项目部署
本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOST ...
- linux下的 c 和 c++ 开发工具及linux内核开发工具
https://opensource.com/article/18/6/embedded-linux-build-tools https://github.com/luong-komorebi/Awe ...
- Linux操作系统启动故障排错之"/sbin/init"文件被删除恢复案例
Linux操作系统启动故障排错之"/sbin/init"文件被删除恢复案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.删除"/sbin/ini ...
- clipse调试web项目配置调试配置——没有Server
文章:eclipse环境下如何配置tomcat(包含没有Server解决办法) 地址:https://blog.csdn.net/TimliangL/article/details/78882566
- 解决 Vue 刷新页面后 store 数据丢失的问题
原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, ...
- Android init介绍(下)
上一篇请参考<Android init介绍(上)> 5. AIL 在init启动过程中,系统服务等均是通过解析rc文件来启动,而rc文件则是由Android初始化语言(Android In ...