CSS3简单的小技巧:linear-gradient切角画册
关于linear-gradient的语法就不多做介绍了网上到处都是,下面看个小例
我们先做一个渐变,使其让他旋转,
<div class="example"> </div>
.example{
height:150px;
width:500px;
margin: 100px auto;
background-color:#4299BC;
background:
-webkit-linear-gradient(45deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(135deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(225deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(315deg, #0E2D57 30px, #A7EAFB 30px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
}
如果把深色改为透明,那么我们想要的东西就出来了
代码下
<div class="tucked-corners-top">
<div class="tucked-corners-bottom"><img src="······"></div>
</div>
.tucked-corners-top {
position: relative;
width: 500px;
min-height: 200px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
background:
-webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-moz-linear-gradient(45deg, transparent 10px, #fff 10px),
-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #fff 10px),
-o-linear-gradient(135deg, transparent 10px, #fff 10px),
-o-linear-gradient(225deg, transparent 10px, #fff 10px),
-o-linear-gradient(315deg, transparent 10px, #fff 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
-moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
}
[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
content: '';
position: absolute;
height: 20px; width: 80px;
-webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: none\9; /* IE9 */
}
.tucked-corners-top::before,
.tucked-corners-top::after {
top: -10px;
}
.tucked-corners-bottom::before,
.tucked-corners-bottom::after {
bottom: -10px;
}
.tucked-corners-top::before,
.tucked-corners-bottom::before {
left: -42px;
}
.tucked-corners-top::after,
.tucked-corners-bottom::after {
right: -42px;
}
.tucked-corners-top::before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tucked-corners-top::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.tucked-corners-bottom::before {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.tucked-corners-bottom::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
ps:IE好像还没有完全支持,所以我就没有写IE兼容
CSS3简单的小技巧:linear-gradient切角画册的更多相关文章
- 【CSS3】---样式小技巧
水平居中设置-定宽块状元素 当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素.这一小节我们先来讲一讲定宽块状元素. 满足定宽 ...
- [小技巧] Windows7 半角全角快捷键 修改方法
From : http://blog.sina.com.cn/s/blog_87ab67b10100x3ww.html 转载说明:在浏览器下我们可以使用空格下翻一页,Shift + 空格上翻一页. 但 ...
- 前端程序员应该知道的15个 jQuery 小技巧
下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...
- Chrome 的 100 个小技巧 中文版
英文原版<100 Tips For Chrome, Chrome OS and ChromeBook Users>作者博客 - chromestory.com 本文是对<100 Ti ...
- 前端程序员应该知道的 15 个 jQuery 小技巧
下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...
- 【小技巧】在PS中测量图层间的边距
今天学到了一个小技巧,前端切页面时会很方便,就是测量间距margin的. 在ps中,选中某个图层,然后按住ctrl键,再移动鼠标,就可以出现这个图层距其他元素的边距,这个太方便了.在此记录一下,免的以 ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- FineUI小技巧(1)简单的购物车页面
起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
随机推荐
- Spring之Ioc
Spring的特性 >> 轻量级(Lightweight)相较于EJB而言Spring是轻量级的容器,不依赖任何web容器 >> 容器(Container) Spring本身不 ...
- 【vue.js权威指南】读书笔记(第一章)
最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...
- cordova使用Gradle构建下载maven太慢,使用阿里云镜像
修改build.gradle: buildscript { repositories { maven{ url 'http://maven.aliyun.com/nexus/content/group ...
- XML和JSON数据格式对比
概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...
- sql 中set和select区别
基于SQL中SET与SELECT赋值的区别详解 2012年09月06日 ⁄ 综合 ⁄ 共 912字 ⁄ 字号 小 中 大 ⁄ 评论关闭 最近的项目写的SQL比较多,经常会用到对变量赋值,而我使用SET ...
- 改造过的JS颜色选择器
项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/ ...
- Android 蓝牙API详解
随着近两年可穿戴式产品逐渐进入人们的生活,蓝牙开发也成为了Android开发的一个重要模块,下面我们就来说一说蓝牙的这些API. 1.蓝牙开发有两个主要的API: BuletoothAdapter:本 ...
- JSP中动态INCLUDE与静态INCLUDE的区别
动态INCLUDE 用法: <jsp:include page="included.jsp" flush="true" /> 说明: 它总是会检查所 ...
- JS调用OC方法并传值,OC调用JS方法并传值////////////////////////zz
iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...
- 。。。学习CSS3的第一个属性border-radius。。。
学习border-radius,感觉这个文档写的很不错: http://blog.sina.com.cn/s/blog_61671b520101gelr.html