CSS3
文章平均质量分 75
约德尔蒙
本人博客大部分为自己总结的, 难免有一些错误,请大家多多查阅多多对比,欢迎指正!
展开
-
css3-2d变换 旋转 等属性
/*--------------------------------2d变换 之 缩放 scale-----------------------------------*/ /*.box .box2:hover{*/ /*background-color: blue;*/ /*/!* transform:原创 2016-11-21 20:22:24 · 516 阅读 · 0 评论 -
input radio 自定义css样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> input[type=&原创 2018-08-22 13:59:24 · 3274 阅读 · 1 评论 -
CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,word-break: 当字符和数字混合的时候也可以不换行。实现方法:width: 100px; line-height: 20px; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-s...原创 2017-10-11 13:18:16 · 413 阅读 · 0 评论 -
css3-颜色渐变 线性 径向
/**/ div{ width: 1000px; height: 100px; border: 1px solid #000; margin:0 auto; margin-top:50px; } /* lin原创 2016-11-21 20:37:54 · 836 阅读 · 0 评论 -
css3-颜色(RGBA HSLA 透明等)
/**/ .out{ width: 400px; height: 400px; background-color: blue; margin:100px auto; border: 1px solid #000; /*transparent 透明的*/ backgroun原创 2016-11-21 20:36:21 · 407 阅读 · 0 评论 -
css3-文本阴影效果、凹凸效果
p{ font-size: 150px; font-family: "Microsoft Yahei"; text-align: center; line-height: 150px; font-weight: bold; /* 文字阴影: 水平位移 垂直原创 2016-11-21 20:35:28 · 3187 阅读 · 0 评论 -
css3-私有化前缀(兼容问题)
.box{ width: 1100px; height: 200px; border: 1px solid #000; margin:100px auto; /* 背景渐变*/ /* -webkit-: chrome s原创 2016-11-21 20:33:20 · 913 阅读 · 0 评论 -
css3-属性、伪类、nth-child选择器
/* 伪类: :link :hover :active :visited 伪类的特点:以 :开头 */ .box{ width: 600px; height: 430px; margin:100px auto; }原创 2016-11-21 20:32:10 · 700 阅读 · 0 评论 -
css3-宽度 位置 等过渡属性
/*------------------------------宽度过渡-----------------------------------*/ /**/ /*.box{*/ /*/!* 给box添加了过渡,时间为2s*!/*/ /*transition: width 2s,background-color 1s;原创 2016-11-21 20:30:52 · 857 阅读 · 0 评论 -
css3-多列布局
--> --> --> -->原创 2016-11-21 20:29:20 · 279 阅读 · 0 评论 -
css3-动画steps等属性
<!--@keyframes move { from{ transform: translateX(0px) rotate(0deg) ; } to{ transform: translateX(500px) rotate(555deg)原创 2016-11-21 20:28:04 · 746 阅读 · 0 评论 -
css3-边框 圆角 阴影 等属性
右上——》右下--》左下*/-->原创 2016-11-21 20:26:36 · 585 阅读 · 0 评论 -
css3-背景图片尺寸 裁剪 原点 多背景等属性
/**/ /*background: url(images/baby0.jpg) no-repeat;*/ /* 设置背景图片大小*/ /*长和宽*/ /*background-size:100px 100px;*/ /*background-size: 50% 50%;*/ /*原创 2016-11-21 20:25:24 · 1282 阅读 · 0 评论 -
css3-3D旋转 透视 位移等属性
<!--.rotateX:hover img{ transform:rotateX(360deg); }--> <!--.rotateX:hover img{ transform:rotateY(360deg); }-->原创 2016-11-21 20:23:27 · 1462 阅读 · 1 评论 -
css unicode字符集 特殊符号
使用方法:这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8; 编号用在HTML中时,需要在前面加上&#符号; 用于CSS文件中,但是需要用反斜杠\转义; 用于JavaScript,和CSS用法一样,不过要用\u来转义。需要注意:有的字符在不同的浏览器下表现不太一样;比如小雪人 ☃ 在Firefox和Chrome下不太一样,钻石 ◆ 在IE下要比Chrom...转载 2018-08-23 10:02:15 · 3158 阅读 · 1 评论