<!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>






.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:; /*设定新创建的元素*/

position:absolute; /*相对于父容器绝对定位，设置偏移父容器边框距离*/

top:;

right:;

/*设置元素的阴影效果*/

-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

}




效果图：


												


											
CSS3实战开发: 折角效果实战开发的更多相关文章
	

    
								
  1. CSS3知识之折角效果
		
    CSS3折角效果:可兼容不同背景
    
		
    2. 
						
  2. CSS3图片折角效果
		
    本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素 ...
    
		
    3. 
						
  3. CSS3实现文字折纸效果
		
    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...
    
		
    4. 
						
  4. css 折角效果/切角效果
		
    首先我们先创建一个图案为100像素的斜面切角的图案 html <div class="one">12345</div> css .one{ width: 1 ...
    
		
    5. 
						
  5. CSS  折角效果
		
    1 <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: #ff ...
    
		
    6. 
						
  6. Css--深入学习之折角效果
		
    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 代码: /*建立一个带圆角的矩形,并使用线性渐变将其从左到底透 ...
    
		
    7. 
						
  7. css切角效果，折角效果
		
    html <div class="one">12345</div> <div class="two">abcde</d ...
    
		
    8. 
						
  8. div折角~~~
		
    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
    
		
    9. 
						
  9. CSS3实战开发:使用CSS3实现photoshop的过滤效果
		
    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. PC高级语言与施耐德、罗克韦尔、台达等PLC的Modbus通讯源代码（ModbusTCP.DLL/ModbusRTU.DLL）
			
    1.0  通讯组件概述 该类通讯组件适用于基于PC高级语言的工业自动化控制系统,用于PC与可编程控制器(PLC).智能仪表等进行数据通讯.组件采用动态链接库文件(*.DLL)的形式,在PC系统的项目工 ...
    
			
    2. 
						
  2. ROS actionlib学习（三）
			
    下面这个例子将展示用actionlib来计算随机变量的均值和标准差.首先在action文件中定义goal.result和feedback的数据类型,其中goal为样本容量,result为均值和标准差, ...
    
			
    3. 
						
  3. Redis server went away的解决方案
			
    Redis server went away出现的问题如下: 1.看redis服务是否启动,包括端口 2.看是否是服务器端的防火墙引起的,iptables和selinux 3.看是否是redis.co ...
    
			
    4. 
						
  4. WCF中记录SOAP消息日志
			
    Windows Communication Foundation (WCF) 默认启用消息日志,WCF使用了在System.Diagnostics名称空间中定义的跟踪机制.在这个跟踪机制中,通过在配置 ...
    
			
    5. 
						
  5. 测试覆盖率工具：EclEmma
			
    测试覆盖率工具:EclEmma 2016-08-26 目录 1 测试覆盖率实现技术2 EclEmma介绍3 EclEmma测试覆盖率指标4 EclEmma安装5 示例项目介绍  5.1 创建项目  5 ...
    
			
    6. 
						
  6. [转]在Windows上安装RabbitMQ
			
    原文链接    翻译:xiezc 下载服务器 描述 下载   Windows系统安装程序(来自Bintray) 的RabbitMQ的服务器-3.7.4.exe (签名) Windows系统安装程序(来 ...
    
			
    7. 
						
  7. linux 常用命令1【转】
			
    1.1. 关机 shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdown -h hours:minutes & 按预定 ...
    
			
    8. 
						
  8. JS封装动画框架,网易轮播图,旋转轮播图
			
    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
    
			
    9. 
						
  9. Foxpro数据库连接错误解决方法--【VFP DBF文件不是一个有效的路径。 确定路径名称拼写是否正确，以及是否连接到文件存放的服务器】
			
    直接访问vfp dbf文件时报错: 错误描述: 'd:\vfpData\test.dbf'不是一个有效的路径. 确定路径名称拼写是否正确,以及是否连接到文件存放的服务器. 解决办法:Data Sour ...
    
			
    10. 
						
  10. 【转】WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
			
    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 日历控件Calendar自定义样式: 日期控件DatePicker自定 ...
    
			
    11.