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代码,虽然有在线示例代码链接,但访问速度 ...
随机推荐
- System.Windows.Freezable 在未被引用的程序集中定义
System.Windows.Freezable 在未被引用的程序集中定义 解决方法 添加windowsbase.dll 引用
- Type conversions in C++类型转换
###Implicit conversions隐式转换* 可以在基本类型之间自由转换:* 可以把任何类型的pointer转换为void pointer:* 可以将子类pointer转换为基类point ...
- Mac iTerm2登陆CentOS提示warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory
[报错原因]:没有utf-8这个语系(没添加语言_国名前缀),LC_ALL又没设定值. 服务端解决方法: 在远程系统上, /etc/environment 加入以下两行,重新登陆即可. LANG=en ...
- WinForm ListView不分页加载大量数据
WinForm的ListView在加载大量数据时会出现闪烁的问题,同时数据加载很慢.如果你的列表中有超过千条的数据且不做特殊处理还是用普通的ListView.Items.Add(),估计你的用户得抱怨 ...
- Day 42 协程. IO 并发
一.什么是协程? 是单线程下的并发,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度的. 协程相比于线程切换效率更快了. ...
- 标准的sql执行顺序
正常情况下是先join再进行where过滤
- js获取时间的函数集
var mydate = new Date(); mydate.getYear(); //获取当前年份(2位) mydate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- 目标检测算法—YOLO-V1
为什么会叫YOLO呢? YOLO:you only look once.只需要看一眼,就可以检测识别出目标,主要是突出这个算法 快 的特点.(原文:Yolo系列之前的文章:主要是rcnn系列的,他们的 ...
- TCP-IP 端口号
FTP服务器的TCP端口号 21 Telnet服务器的TCP端口号 23 TETP(简单文件传输协议)服务器的UDP端口号 69 任何TCP/IP实现所提供的服务都用1-1023之间的端口号 至 ...
- 远程连接MySQL提示 Host is not allowed to connect to this MySQL server
进入连接的主机修改系统数据库MySQL 下面的user表,把User= root(这里可能是其他你所需要连接的用户名)的这行数据的Host从localhost改为% 如下图: 修改完之后一定要重启My ...