CSS3实战开发:手把手教大家折角效果实战开发
来源:互联网 发布:mac任务栏图标太多 编辑:程序博客网 时间:2024/06/05 16:29
转:http://www.cnblogs.com/itdriver/p/3901102.html
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-9">
<meta name="keywords" content="css,css3,实战互联网,教程">
<meta name="description" content="css3实现折角效果,折角效果,css3实战尽在实战互联网" >
<link rel="stylesheet" href="styles_2014080901.css">
<title>CSS3实现折角效果实战开发</title>
</head>
<body>
<div class="note">
</div>
</body>
</html>
css:
*{ /*清除所有元素的内外边距*/
margin:0;
padding:0;
}
.note { /*设置折叠样式基本属性*/
width:480px;
height:400px;
margin:2em auto; /*调整.note元素的外边距*/
padding:2em;
background:#53A3B4;
}
====================
.note:before {
content:"";
display:block; /*伪元素默认是行内元素,所以如果要设定宽高,这必须显性设置为block*/
border-width:0 16px 16px 0; /*设置边框宽度*/
border-color:#fff #fff transparent transparent; background:transparent;
border-style:solid; /*设置边框为固体的*/
width:0; /*设定新创建的元素*/
}
(
这里我对伪元素:before做一个简单的介绍,:before伪元素必须指定内容,如果没有也必须设置content:""; 由于伪元素默认是行内元素,所以如果要设置宽高,这必须显性设定其为block。如果相对伪元素有更详细了解,请关注我的空间。
伪元素创建好了,但是我希望我创建的元素位于.note区域的右上角。好,我们可以通过position的relative(相对定位)和absolute(绝对定位)来调整元素的位置。
给.note应用position:relative(相对定位):
).note { /*设置折叠样式基本属性*/
width:480px;
height:400px;
margin:2em auto; /*调整.note元素的外边距*/
padding:2em;
background:#53A3B4;
position:relative;
}
===================================
.note:before {
content:"";
display:block; /*伪元素默认是行内元素,所以如果要设定宽高,这必须显性设置为block*/
border-width:0 16px 16px 0; /*设置边框宽度*/
border-color:#fff #fff transparent transparent; background:transparent;
border-style:solid; /*设置边框为固体的*/
width:0; /*设定新创建的元素*/
position:absolute; /*相对于父容器绝对定位,设置偏移父容器边框距离*/
top:0;
right:0;
}
- CSS3实战开发:手把手教大家折角效果实战开发
- CSS3实战开发:手把手教你纯CSS3手风琴特效实战开发(无需JS代码或插件)
- 手把手教React Native实战开发视频教程 干货
- html5游戏开发实战-----大家来找茬
- 零基础学习嵌入式入门以及项目实战开发【手把手教+国内独家+原创】
- 手把手教你android平台下通讯录的开发实战视频
- 东方耀 手把手教React Native实战开发视频教程共237集
- 希望大家支持我的新书《JAVA开发实战经典》
- 【HTML5+CSS3开发实战】第2章 初识HTML5
- 跨平台的移动Web开发实战(HTML5+CSS3)
- H5实战案例分享、HTML5+css3淘宝客开发实战、H5微商城源码
- iOS项目开发实战——视图动画效果
- jetspeed开发实战
- jetspeed开发实战
- JSF开发实战(一)
- JSF开发实战(一)
- JSF开发实战(二)
- JSF开发实战(一)
- iOS--打开第三方应用
- Arduino使用ESP8266通信的实践
- ioremap映射的问题
- python 高级特性
- hadoop中MapReduce多种join实现实例分析
- CSS3实战开发:手把手教大家折角效果实战开发
- Island Perimeter
- Java中的I/O流及利用I/O流实现文件复制功能
- SET NEWNAME FOR DATABASE TO恢复数据库
- [读书笔记]30 天自制操作系统 day2 汇编语言学习与Makefile入门
- 初入MVP框架
- 如何关闭html页面上的iframe页面
- 开发项目之遇到eayui 中window panel 超过父页面的问题
- iOS 导航栏的那些事儿