CSS3
关注
分享
扫一扫
文章平均质量分 51
houyanhua1
这个作者很懒，什么都没留下…
展开
-
CSS3 线性渐变色(linear-gradient)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 1000px;原创 2018-03-22 17:11:44 · 2017 阅读 · 0 评论 -
CSS3 伪元素选择器(::first-letter ::first-line ::selection)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 伪元素选择器 */ /* 第一个字母/汉字 *原创 2018-03-21 11:58:41 · 887 阅读 · 0 评论 -
CSS3 颜色透明度(rgba,hsla)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* rgba:支持透明度的颜色(背景色/字体颜原创 2018-03-21 14:50:15 · 1146 阅读 · 0 评论 -
HTML5 CSS3,全屏,全屏伪类,JavaScript
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-25 21:36:38 · 1070 阅读 · 0 评论 -
CSS3 文字阴影(text-shadow),凹凸文字特效
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color:原创 2018-03-21 16:02:12 · 2095 阅读 · 0 评论 -
CSS3 盒子模型(box-sizing: border-box(内减模式))
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; h原创 2018-03-21 16:34:10 · 1992 阅读 · 0 评论 -
CSS3 浏览器私有化前缀
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 1000px;原创 2018-03-21 17:13:29 · 364 阅读 · 0 评论 -
CSS3 圆角边框(border-radius)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px;原创 2018-03-21 19:49:50 · 497 阅读 · 0 评论 -
CSS3 盒子阴影(box-shadow)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color:原创 2018-03-21 20:21:37 · 255 阅读 · 0 评论 -
CSS3 边框图片(border-image)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 300px;原创 2018-03-21 21:16:00 · 828 阅读 · 0 评论 -
CSS3 背景原点(background-origin),背景从什么位置开始显示
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 22:17:36 · 1497 阅读 · 0 评论 -
CSS3 背景裁剪(background-clip)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 22:27:50 · 2246 阅读 · 0 评论 -
CSS3 同时添加多张背景图片 (屏幕适配)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-22 12:16:41 · 9273 阅读 · 0 评论 -
移动web 移动端常用的CSS设置
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-原创 2018-03-27 15:43:17 · 1394 阅读 · 0 评论 -
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 500px;原创 2018-03-21 21:56:21 · 59280 阅读 · 1 评论 -
CSS less学习(动态样式语言)
http://www.bootcss.com/p/lesscss/转载 2018-03-28 11:22:25 · 321 阅读 · 0 评论 -
CSS3 伪元素(::before ::after)(用CSS模拟html标签元素)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 伪元素:用CSS模拟出html标签的效果 (:b原创 2018-03-21 11:10:34 · 3696 阅读 · 0 评论 -
CSS3 伪类(:target)(配合锚点使用)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul { position:fixed;原创 2018-03-21 10:49:28 · 2151 阅读 · 0 评论 -
CSS3 径向(圆形)渐变 (radial-gradient)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-22 17:32:24 · 5184 阅读 · 0 评论 -
CSS3 用径向渐变(radial-gradient)模拟立体感的球体
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-22 17:47:15 · 2123 阅读 · 0 评论 -
CSS3 属性过渡(transition)(属性渐变动画)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 200px;原创 2018-03-22 18:53:33 · 17827 阅读 · 0 评论 -
CSS3 旋转(transform)
参见：https://blog.youkuaiyun.com/houyanhua1/article/details/79660780demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&a原创 2018-03-22 20:07:28 · 874 阅读 · 0 评论 -
CSS3 3D旋转(transform)，平移，放大/缩小，倾斜
参见：https://blog.youkuaiyun.com/houyanhua1/article/details/79659096demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...原创 2018-03-22 22:11:16 · 9858 阅读 · 0 评论 -
CSS3 利用伪元素(::before)获取标签自定义属性(data-XX)的值
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>原创 2018-03-23 09:50:24 · 11933 阅读 · 0 评论 -
HTML5 标签自定义属性,以及在JS中如何获取自定义属性的值
demo.html(JS中获取属性值)：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>原创 2018-03-21 08:53:06 · 6640 阅读 · 0 评论 -
CSS3 3D的正方体效果(transform-style: preserve-3d)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>原创 2018-03-23 11:36:50 · 2332 阅读 · 0 评论 -
CSS3 动画体验 自动播放动画(animation,@keyframes)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&l原创 2018-03-23 11:42:39 · 4267 阅读 · 0 评论 -
CSS3 伸缩布局(flex) (可用于屏幕适配)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-24 11:42:16 · 567 阅读 · 0 评论 -
CSS3 自定义字体(图标字体) (@font-face)
demo.html：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p {原创 2018-03-24 17:30:09 · 3830 阅读 · 0 评论 -
CSS3 属性选择器( [] )
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 300px; h原创 2018-03-21 08:53:37 · 305 阅读 · 0 评论 -
CSS3 结构伪类(:first-child)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <style> /* 伪类(原创 2018-03-21 10:01:47 · 483 阅读 · 0 评论 -
CSS3 empty伪类(:empty)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 500px; h原创 2018-03-21 10:21:07 · 2959 阅读 · 0 评论 -
JavaScript CSS3,过渡(transition)(动画)结束事件,(webkitTransitionEnd)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box {原创 2018-03-28 16:23:15 · 4069 阅读 · 0 评论