好玩的 css3 炫酷属性
1. Text-stroke（文字描边）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>文字描边</title>
<style>
html,body{font:bold 14px/1.5 georgia,simsun,sans-serif;text-align:center;}
p{-webkit-text-stroke-width:2px;-webkit-text-stroke-color:#ff0;
}
</style>
</head>
<body>
<body><p>我描了2像素黄边</p>
</body>
</html>
2. ::first-letter（首字变大）
p:first-letter {color: #ff0000;font-size:xx-large}
3. Gradient text（文字渐变）
h1 {font-size：72px;
background：-webkit-linear-gradient（#eee，＃333）;
-webkit-background-clip：text;
-webkit-text-fill-color：transparent;
}
4. Line-clamp限制在一个块元素显示的文本的行数。
需要结合：display: -webkit-box; 属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 属性 ，设置或检索伸缩盒对象的子元素的排列方式 。text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。overflow : hidden;
p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; /*设置p元素最大4行，父元素需填写宽度才明显*/text-overflow: ellipsis;overflow: hidden;/* autoprefixer: off/on *//*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/word-wrap:break-word;word-break:break-all;
}
<p> static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，
</p>
5. Column-count（ 把div元素中的文本划分成合适的列）
.newspaper
{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;
}
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
<div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
6. html标签<wbr>
标签如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 元素来添加 Word Break Opportunity（单词换行时机）
<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
7. Object fit(对图片进行剪切，保留原始比例)
img.a {width: 200px;height: 400px;object-fit: cover;
}
9. Conic-gradient（圆锥梯度）
background: conic-gradient(red, orange, yellow, green, blue);
使用场景
11. Counters（给li前加序号）
ol {margin: 0;padding: 0 0 0 2em;list-style: none;counter-reset: item;
}
li:before {counter-increment: item;content: counter(item)".";color: #f00;
}
</style>
</head>
<body>
<ol class="test"><li>Node<ol><li>Node<ol><li>Node</li><li>Node</li><li>Node</li></ol></li><li>Node</li></ol></li><li>Node</li><li>Node</li>
</ol>
12. Selection（使被选中的文本）
::selection {background: #f3b70f;
}
或者
::selection {color: #f3b70f;
}
参考链接
好玩的 css3 炫酷属性相关推荐
- html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
- html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
- jQuery+CSS3炫酷机械键盘js特效
下载地址 jQuery+CSS3炫酷机械键盘特效,点击键盘按键会出现凹进去的效果,css模拟真实的键盘特效. dd:
- html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...
- python3d相册源代码_js和CSS3炫酷3D相册展示
js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overfl ...
最新文章
- minimun-depth-of-binary-tree
- How to download BOM from ERP to CRM
- 【渝粤教育】国家开放大学2018年春季 0689-22T老年心理健康 参考试题
- Java工作笔记-接入互联网的免费WebService
- leetcode 27 移除元素 （python）
- Web服务及http协议_学习笔记
- 华为U2000网管研究实录 (3) - 运行分析（服务端进程）
- 免费使用微软Azure进行文字转语音的三种方法！最自然接近人声的机器配音技术。
- 如何使用chevereto自建图床
- Lambert漫反射模型
- 详解SOME/IP测试
- Python 日志logging模块初探及多线程踩坑(2)
- Linux运行网易云命令,因环境变量而在Ubuntu 18.04下无法启动网易云音乐的解决
- 连缀介绍和简单库对象
- Android计步器的实现（1）
- 连接HC-05与HC-06
- 1178_hardware_basic_什么是高阻态
- 辞职一年后，我来谈谈30多岁中年人的转型
- 恒讯科技分析香港虚拟主机打不开网站的问题以及解决方法
- python篇-基础知识2