html5添加渐变边框效果,《CSS3揭秘》上(边框,投影,渐变,条纹效果,蚂蚁行军)...
最近看了《css3揭秘》一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找。不得不感叹学无止境哦~
1、边框与背景
半透明边框
.demo{
background-color: #fff;
border: rgba(255, 255, 255, 0.5) 10px solid;
background-clip: padding-box;
}
技巧归纳:使用背景剪切属性,将背景的显示不包含边框
background-clip:对背景进行剪切,这个是根据css的盒模型分的:
border-box(背景包含到边框)
padding-box(背景只包含到边距)
content-box(背景只包含到内容)
多重边框
.demo{
outline: #fff 1px dashed;
outline-offset: -10px;
}
技巧归纳
outline:是绘制于元素周围的一条线,位于边框边缘的外围
outline-offset:设置轮廓的偏移位置
边框内圆角
.demo{
border-radius: 8px;
box-shadow: 0 0 0 8px #655;
}
技巧归纳:利用阴影的特性实现
box-shadow:h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊距离) spread(阴影的尺寸) color(阴影颜色) inset(内部阴影)
条纹效果
.demo{
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
}
技巧归纳:利用线性渐变的特性实现
linear-gradient:(渐变方向,起始颜色,结束为止,结束颜色,起始位置) 说实在的,这个真的需要多体验才能理解~
background-size:背景大小的设置
.demo{
background: repeating-linear-gradient(45deg, #fb3 0,#fb3 15px,#58a 15px,#58a 30px);
}
技巧归纳:利用重复线性渐变的特性实现,支持角度设置
蚂蚁行军
这个效果,之前用过svg实现过,原来css3也是可以的。这里的原理是利用多重背景实现的,你需要理解background的各属性特性呀。(动态效果请访问蚂蚁行军效果)
.demo {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid transparent;
background-image:
linear-gradient(white,white),
repeating-linear-gradient(-45deg, black 0, black 25%, white 25%, white 50%);
background-size: 20px 20px;
background-clip: padding-box,border-box;
background-position: 0;
animation: ants 12s linear infinite;
}
@keyframes ants{
to{
background-position: 100%;
}
}
2、形状
椭圆
自适应的椭圆
.demo{
border-radius: 50% / 50%;
}
技巧归纳:border-radius支持2个参数,分别是横坐标,纵坐标。可以是像素也可以是百分比
半椭圆
.demo{
border-radius: 100% 0 0 100% / 50% 0 0 50%;
}
技巧归纳:border-radius支持8个参数,分别是上左,上右,下左,下右
四分之一的圆
.demo{
border-radius: 0 100% 0 0;
}
三角形
.demo{
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.demo:hover{
-webkit-clip-path: circle(100px at 50% 50%);
}
技巧归纳:clip-path剪切路径
切角
.demo {
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #655 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #655 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
折角
.demo {
background: linear-gradient(-135deg, transparent 15px, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 21.4px 21.4px,
linear-gradient(-135deg,transparent 15px, #58a 0)
}
3、投影
单侧投影
.demo {
background-color: #fffbbb;
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .5);
}
双侧投影
.demo {
box-shadow: 6px 0px 4px -4px rgba(0, 0, 0, .5),
-6px 0px 4px -4px rgba(0, 0, 0, .5)
}
技巧归纳:利用box-shadow的第四个参数:扩张半径,这个参数会根据指定的值扩大或者缩小投影的尺寸
html5添加渐变边框效果,《CSS3揭秘》上(边框,投影,渐变,条纹效果,蚂蚁行军)...相关推荐
- 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
- 透明水晶边框css,CSS揭秘——透明边框
当我们在实现透明边框的时候,会遇到一些问题.在阐述这些问题之前,首先看看什么是透明边框,总的来说,就如下图所示. 透明边框.png 众所周知的是,一旦给一个元素设置了背景之后,那么这个背景所包含的区域 ...
- css3加载中动画效果,CSS3实现加载中的动画效果
Loading 的菊花图形组合的不太好,基本上实现这个功能了 动画解析 这个动画用到的 CSS3 特性: transform 主要使用 transform 属性的 rotate,将线条组合成 Load ...
- html边框渐变颜色代码,CSS3 七彩渐变色边框效果
CSS 语言: CSSSCSS 确定 body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetic ...
- form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
- html怎么添加图片幻灯,使用CSS3实现的超酷幻灯图片效果
这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后使之动画. HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下: 1 ...
- 一个炫酷的opengles2.0翻页效果(安卓上opengles2.0 翻书效果附源码)
写了一个opengles2.0的小效果,平台是安卓,给各位朋友们看一看,有兴趣想要源码的朋友可以email我 5358951@qq.com. 先看效果 前言 1.在安卓上实用opengles进行开 ...
- html5添加背景音乐
0.补充demo 把代码分离出来做了demo,大家需要的可以自行下载,下载地址:下载地址点这里 1.需求说明 html5添加背景音乐 2.问题解决 直接上代码吧 首先添加音乐控件的div <di ...
- “蚂蚁行军”和彩色边框设计
这里展示两种边框效果,一种是"蚂蚁行军"的动态边框效果,当然,截图中是看不出来动效的,读者需要自己动手运行才能看到效果:另一种是类似老式信封边框一样的彩色边框效果,这个效果在实际开 ...
- html正方形边框,详解HTML设置边框的三种方式
HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green b ...
最新文章
- Unity3D绑定button监听事件
- 【Matlab 控制】函数调用函数
- 银行假流水怎么识破?
- 【剑指offer】_08.数值的整数次方
- leetcode 1011. 在 D 天内送达包裹的能力(二分法)
- 面试精讲之面试考点及大厂真题 - 分布式专栏 17 ElasticSearch解决大数据量检索难题
- 运用基础班知识做一个网页
- mybatis添加方法可以传map吗_Mybatis创建方式二
- 【王道操作系统笔记】操作系统的发展和分类
- Linux上FTP服务的相关配置2:搭建FTPs及虚拟账号
- csharp为何不流行_“我太南了”这些年度流行语到底是怎么选的?
- chattr和lsattr的基本用法
- PSSH的安装和简单操作
- 【优化算法】矮猫鼬优化算法(DMO)【含Matlab源码 611期】
- 怎么改mnist数据的标签_详解 MNIST 数据集
- spss如何调用已经训练好的神经网络模型
- 【毕设选题】基于STM32的毕业设计题目项目汇总 - 350例
- 推荐书籍:软件定义网络 SDN与OpenFlow解析
- PhysX官方手册翻译(Dynamics)
- 10部令人泣不成声的经典电影
热门文章
- geometry-api-java 学习笔记(一)概述
- 商城计价中心 - 从容应对复杂场景价格计算
- Silverlight实例教程 - Out of Browser的Debug和Notifications窗口
- Java中避免if-else-if:策略模式
- [LintCode] Minimum Size Subarray Sum 最小子数组和的大小
- Objective-C使用位运算设计可复选的枚举
- WEB开发中的页面跳转方法总结
- SWT的UI线程和非UI线程
- Windows server 2008R2本地组与本地用户的创建和管理
- 最全的cisco ios下载,思科ios下载