<!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. 坚果云无法同步SVN文件夹
			
    把svn的库放在云盘上,同步到本地,以前在金山快盘.360网盘都用得好好的,换坚果云后,想着肯定没问题,结果发现,不行! 新机子上的版本库可以建起来,但检出时报错: Could not open th ...
    
			
    2. 
						
  2. WPF如何为程序添加splashScreen（初始屏幕）
			
    一.考虑到大部分的splashscreen其实都只是一个图片,所以最简单的做法是,先导入一张图片,然后设置它的生成操作为“splash screen” 二.通过程序设置SplashScreen pub ...
    
			
    3. 
						
  3. SQL Server2012 配置管理器无法打开
			
    由于需要电脑上装了 SQLServer 2008 R2 和 SQLServer 2012 两个版本的数据库,两个库的实例名称不一样,之前一直用实例名连接对应的数据库,正常没有问题.现在用 “ip+端口 ...
    
			
    4. 
						
  4. 手把手教你整合最优雅SSM框架：SpringMVC + Spring + MyBatis
			
    在写代码之前我们先了解一下这三个框架分别是干什么的? 相信大以前也看过不少这些概念,我这就用大白话来讲,如果之前有了解过可以跳过这一大段,直接看代码! SpringMVC:它用于web层,相当于con ...
    
			
    5. 
						
  5. VTK计算网格模型上的最短路径
			
    Dijkstra algorithm to compute the graph geodesic.Takes as input a polygonal mesh and performs a sing ...
    
			
    6. 
						
  6. Linux ext3/ext4数据恢复
			
    2012年12月9日      测试环境: Ubuntu 12.04 X86 +ext4 恢复文件使用的工具:extundelete(点击下载) 说明:当文件异常消失或者rm误删除后,避免在该分区中继 ...
    
			
    7. 
						
  7. 基于ubuntu搭建 Discuz 论坛
			
    系统要求:Ubuntu 16.04.1 LTS 64 位操作系统 安装 Apache2 ubuntu 需要安装 Apache2 ,使用 apt-get 安装 Apache2(安装好后,您可以通过访问实 ...
    
			
    8. 
						
  8. 编写SHELL脚本--判断用户的参数
			
    测试语句格式: [ 条件表达式 ] 常见的几种形式: [ -d /etc ]  判断/etc是不是一个目录类型, [ -e /etc/php.ini ] 判断/etc/php.ini 文件是否存在 [ ...
    
			
    9. 
						
  9. linux/unix命令参考
			
    
			
    10. 
						
  10. 【C语言】符号优先级
			
    一. 问题的引出 今天看阿里的笔试题,看到一个非常有意思的题目,但是很容易出错. 题目:如下函数,在32bit系统foo(2^31-3)的值是: Int foo(int x) { return x&a ...
    
			
    11.