css揭秘
一：渐变
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 background: linear-gradient(direction, color-stop1, color-stop2, ...);
- 径向渐变（Radial Gradients）- 由它们的中心定义 background: radial-gradient(center, shape size, start-color, ..., last-color);
- 重复的径向渐变 background:repeating-radial-gradient(center, shape size, start-color, ..., last-color);
补充：
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size 参数定义了渐变的大小。它可以是以下四个值：
- closest-side
- farthest-side
- closest-corner
- farthest-corner
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
二：currentcolor（css第一变量）
比图想要hr线的颜色和字体颜色保持一致，可以这样写：
hr{
height:.5em;
background: currentcolor;
}
类似这些border-color outline-color text-shadow box-shadow都可以使用
三：border-radius(/”前面的值设置其水平半径，“/”后面值设置其垂直半径。)
border-radius:30px / 20px 40px;
四：波点
<head>
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 200px;
height: 100px;
background:#655;
background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0); //如果这里只有一项，没有background-position,效果图第二个图
background-size: 30px 30px;
background-position:0 0, 15px 15px;
}
</style>
</head> <body>
<div class="box">
<div class="one"></div>
</div>
</body>
效果图：
五：色轮
.two{
margin-top: 100px;
width:200px;
height: 200px;
border-radius: 100px;
background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);
}
效果图：
六：文字垂直居中
加载父元素中，
display: flex;
flex-direction: column;
justify-content: center;
css揭秘的更多相关文章
- [css 揭秘]-css coding tips
css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...
- CSS揭秘读书笔记 （一）
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 《css揭秘》
<css揭秘> 第一章:引言 引言 案例们 第二章:背景与边框 背景和边框 半透明边框(rgba/hsla.background-clip) 多重边框(box-shadow) 灵活的背景定 ...
- [css 揭秘]：CSS揭秘 技巧（三）：背景定位
我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...
- CSS揭秘 技巧（五）：条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...
- [css 揭秘]：CSS揭秘 技巧（二）：多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
- [css 揭秘]：CSS揭秘 技巧（一）：半透明边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...
- [css 揭秘]：CSS编码技巧
CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...
- CSS揭秘—透明边框（一）
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
随机推荐
- MySQL Route负载均衡与读写分离Docker环境使用
Docker环境描述 主机名 部署服务 备注 MySQL Route MySQL Route 部署在宿主机上的MySQL Route服务 MySQL Master1 MySQL 5.7.16 Dock ...
- Send or receive files via Xshell
1. install lrzsz $ sudo apt-get install lrzsz 2. If you want to send file from your pc to pi, just d ...
- SqlServer Session共享注意点
公司下派任务,之前的网站是一台服务器,由于用户过多,负载过大,现在老大要求多加一台服务器.加就加贝,应该跟我这DEV没有 关系吧,应该不会碰到Source的吧.但是,之前网站有一些数据是放在Sessi ...
- [C#学习笔记]lock锁的解释与用法
写在前面 前几时在写业务代码的时候,看到有用到lock这个方法的,而我竟然并不知道是做什么用的,所以查找了许多博客文章,弄懂了百分之七八十,在此做下笔记. 感谢博客 http://www.cnblog ...
- UCS2-little endian转码（utf16）
public static void readFile(){ BufferedReader in = null; try { in = new BufferedReader(new InputStre ...
- Map容器中keySet()、entrySet()
1.定义 keySet(): 返回的是只存放key值的Set集合,使用迭代器方式遍历该Set集合,在迭代器中再使用get方法获取每一个键对应的值.使用get方法获取键对应的值时就需要遍历Map集合,主 ...
- （samba启动失败）smb.service: main process exited, code=exited, status=1/FAILURE
按照指示,前往:journalctl -xe 没什么发现,搜的时候有人说也可以查看 journalctl -r 打出来之后我也看不出什么门道来 又看到有人说 smb 方面可以看看 testparm 我 ...
- javascript浅拷贝深拷贝理解记录
javascript的深拷贝和浅拷贝问题几乎是面试必问的问题.好记性不如烂笔头,特此来记录一下自己对深拷贝浅拷贝的理解. 顾名思义,拷贝就是copy复制,在js中可以浅而理解为对一个对象或者数组的复制 ...
- ios实现fastlane自动化打包
终于抽出时间来学习自动化打包了,app在测试阶段一天总会经历好几次的打包,每次打包真是身心疲惫,刚打完的包说不定就被测试妹子反应还要微调什么地方,我就真的有气没法出,打一次包怎么也得浪费十几分钟,还不 ...
- EF基础知识小记六(使用Code First建模自引用关系,常用于系统菜单、文件目录等有层级之分的实体)
日常开发中,经常会碰到一些自引用的实体,比如系统菜单.目录实体,这类实体往往自己引用自己,所以我们必须学会使用Code First来建立这一类的模型. 以下是自引用表的数据库关系图: ok,下面开始介 ...