<!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. WPF的5种绑定模式（mode）
			
    WPF的绑定模式(mode)是枚举的 枚举值共有5个 1:OneWay(源变就更新目标属性) 2:TwoWay(源变就更新目标并且目标变就更新源) 3:OneTime(只根据源来设置目标,以后都不会变 ...
    
			
    2. 
						
  2. python3用BeautifulSoup用字典的方法抓取a标签内的数据
			
    # -*- coding:utf-8 -*- #python 2.7 #XiaoDeng #http://tieba.baidu.com/p/2460150866 #标签操作 from bs4 imp ...
    
			
    3. 
						
  3. iOS开源项目之日志框架CocoaLumberjack
			
    CocoaLumberjack是Mac和iOS上一个集快捷.简单.强大和灵活于一身的日志框架.CocoaLumberjack类似于流行的日志框架(如log4j),但它是专为Objective-C设计的 ...
    
			
    4. 
						
  4. python下申明式的对象关系DB映射器--Pony
			
    之前看到了Sails.js的waterline提供了声明式的关系型对象与DB的映射器,惊为天人,可以说是极大地提升了效率. 利用waterline的对象关系模型,用户可以直接使用javascript语 ...
    
			
    5. 
						
  5. Arrays.asList中所遇到的坑
			
    前言 最近在项目上线的时候发现一个问题,从后台报错日志看:java.lang.UnsupportedOperationException异常 从代码定位来看,原来是使用了Arrays.asList() ...
    
			
    6. 
						
  6. 用.NET CORE做项目，VS里编译碰到‘。。。。包降级。。。。’错误
			
    用.NET CORE做项目,VS里编译碰到‘....包降级....’错误 本地开发机:WIN10+VS2017 15.7.3 ,用CORE2.1版本的建立一个项目,做好了,传到gitee上 今天有新同 ...
    
			
    7. 
						
  7. mysql索引hash索引和b-tree索引的区别
			
    Hash 索引结构的特殊性,其检索效率非常高,索引的检索可以一次定位,不像B-Tree 索引需要从根节点到枝节点,最后才能访问到页节点这样多次的IO访问,所以 Hash 索引的查询效率要远高于 B-T ...
    
			
    8. 
						
  8. git合并多个提交
			
    git合并多个提交 [时间:2016-11] [状态:Open] [关键词:git,git rebase,合并提交,commit] 0. 引言 本文是关于Git提交记录修改的方法,主要是将多个提交记录 ...
    
			
    9. 
						
  9. 《转》Babel 入门教程
			
    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
    
			
    10. 
						
  10. Python之保存和读取字典
			
    import pickle def save_obj(obj, name ): with open('obj/'+ name + '.pkl', 'wb') as f: pickle.dump(obj ...
    
			
    11.