css3学习之--伪类与圆角
2024-10-20 07:44:13
随着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>
效果如下：
最新文章
- java 线程安全不线程不安全
- C#值数值类型转换
- POJ3184 Ikki's Story I - Road Reconstruction（最大流）
- 【poj 3461】Oulipo（字符串--KMP）
- Angularjs中对时间格式：/Date(1448864369815)/ 的处理
- linux dmesg命令参数及用法详解(linux显示开机信息命令)
- poj 3273 Monthly Expense(贪心+二分)
- gVim多标签页
- Ubuntu下Hadoop快速安装手册
- ftp不能上传解决办法
- 讲一个使用jquery-slick旋转木马效果插件案例
- 流程控制------if else分支语句
- HIVE使用mysql作为外置数据库配置详情
- 1.3浅谈Spring(IOC容器的实现)
- 关于parseInt()里的一些小坑
- 6 个开源的家庭自己主动化工具 | Linux 中国
- HashMap出现Hash DOS攻击的问题
- ES6 — 箭头函数
- 循环链表的实现与操作(C语言实现)
- 用 AutoHotKey 随时记录所想