<!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. 浅谈压缩感知（二十三）：压缩感知重构算法之压缩采样匹配追踪（CoSaMP）
			
    主要内容: CoSaMP的算法流程 CoSaMP的MATLAB实现 一维信号的实验与结果 测量数M与重构成功概率关系的实验与结果 一.CoSaMP的算法流程 压缩采样匹配追踪(CompressiveS ...
    
			
    2. 
						
  2. JAVA消息服务JMS规范及原理详解
			
    JAVA消息服务JMS规范及原理详解 一.简介 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应 ...
    
			
    3. 
						
  3. EditText控件设置只读
			
    android的文本框输入控件(EditText),有时需要设置控件为只读,最简单的方法就是在layout xml文件中设置EditText的android:editable属性值为false即可,但 ...
    
			
    4. 
						
  4. Python根据多个空格Split字符串
			
    下面的String: 1 沪1 上海市 1850 1350 400 1300 1186/1644(嘉定约100,松江69 奉贤68 2007年上海常住人口1858万人,户籍人口1378.86万人,来沪 ...
    
			
    5. 
						
  5. java 除法运算只保留整数位的3种方式
			
      1.情景展示 根据提供的毫秒数进行除法运算,如果将毫秒数转换成小时,小时数不为0,则只取整数位,依此类推... 2.情况分析 可以使用3个函数实现 Math.floor(num)  只保留整数位  ...
    
			
    6. 
						
  6. c# 创建项目时提示：未能正确加载“microsoft.data.entity.design.bootstrappackage.。。。。
			
    google了下, 果然找到办法了.看有的说要卸载,再清理注册表,真心不愿意啊,这安装一次就得好长时间.还好找到了这篇博文,无需卸载重安装,很简单的解决的方式,具体见http://blog.sina. ...
    
			
    7. 
						
  7. Effective Java 第三版——51. 仔细设计方法签名
			
    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
    
			
    8. 
						
  8. SNF快速开发平台--规则引擎在程序当中如何调用
			
    规则定义完如何在程序当中进行使用呢? 其时很简单,只需要如下代码就可以调用程序: 规则定义: 调用代码: #region 演示2:生成左表数据(规则) POST: /api/DEMO/DemoSing ...
    
			
    9. 
						
  9. SNF开发平台WinForm之十五-时间轴控件使用-SNF快速开发平台3.3-Spring.Net.Framework
			
    一.显示效果如下: 二.在控件库里选择UCTimeAxis 拖拽到窗体里. 三.加入以下代码,在load事件里进行调用就可以运行了. #region 给时间轴控件加载数据 private void U ...
    
			
    10. 
						
  10. JS控制音频顺序播放
			
    做一项目,用到“叫号功能”,网页上有一“叫号”按钮,点击后就读数据库中存的号码,如123号, 然后就发声音出来, 思路是网上下载0123456789的叫号声音,然后按钮点击事件里就在JS里写用那个HT ...
    
			
    11.