<!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. 解决Gerrit的git unpack error问题
			
    今天上午同事和我说neutron项目要换成全新的内部代码,原先仓库里的代码要全部废弃掉.于是我就简单地创建了一个空项目使用git push --force将其置空. 下午的时候,麻烦事情就来了,同事发 ...
    
			
    2. 
						
  2. MongoDB副本集配置系列七：MongoDB oplog详解
			
    1:oplog简介 oplog是local库下的一个固定集合,Secondary就是通过查看Primary 的oplog这个集合来进行复制的.每个节点都有oplog,记录这从主节点复制过来的信息,这样 ...
    
			
    3. 
						
  3. 在Asp.Net MVC中使用Repeater控件
			
    使用Repeater控件在视图中展示图表信息,Repeater控件的使用概述: <asp:Repeater ID="Repeater1" runat="server ...
    
			
    4. 
						
  4. [svc]对称加密/非对称加密细枝末节-如何做到数据传输的authentication/data integrity/confidentiality(私密)
			
    对称/非对称/混合加密的冷知识 数据在互联网上传输,要考虑安全性. 讲到安全,要从三方面考虑: 1.authentication 每一个IP包的认证,确保合法源的数据 2.data integrity ...
    
			
    5. 
						
  5. 【Spark 深入学习 02】- 我是一个凶残的spark
			
    学一门新鲜的技术,其实过程都是相似的,先学基本的原理和概念,再学怎么使用,最后深究这技术是怎么实现的,所以本章节就带你认识认识spark长什么样的,帅不帅,时髦不时髦(这货的基本概念和原理),接着了解 ...
    
			
    6. 
						
  6. 【Linux】深入理解Linux中内存管理
			
    主题:Linux内存管理中的分段和分页技术 回顾一下历史,在早期的计算机中,程序是直接运行在物理内存上的.换句话说,就是程序在运行的过程中访问的都是物理地址. 如果这个系统只运行一个程序,那么只要这个 ...
    
			
    7. 
						
  7. 4. OpenAI GPT算法原理解析
			
    1. 语言模型 2. Attention Is All You Need(Transformer)算法原理解析 3. ELMo算法原理解析 4. OpenAI GPT算法原理解析 5. BERT算法原 ...
    
			
    8. 
						
  8. MXNET：多层神经网络
			
    多层感知机(multilayer perceptron,简称MLP)是最基础的深度学习模型. 多层感知机在单层神经网络的基础上引入了一到多个隐藏层(hidden layer).隐藏层位于输入层和输出层 ...
    
			
    9. 
						
  9. 【emWin】例程三十：窗口对象——Multiedit
			
    简介: 本例程介绍MULTIEDIT的使用方法通过MULTIEDIT 小工具可编辑多行文本.它既 可以被用作简单的文本编辑器,也可以用来显示静态文本.该小工具支持带滚动条 和不带滚动条的滚动 触摸校准 ...
    
			
    10. 
						
  10. Cordova开发App入门之创建android项目
			
    Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...
    
			
    11.