select样式修改
select样式修改
<div>
<select name="">
<option value="芝士">芝士</option>
<option value="奶油">奶油</option>
</select>
</div>
样式部分
div{
/* 用div的样式代替select的样式 */
width: 200px;
height: 40px;
border-radius: 5px;
/* 盒子阴影修饰作用,自己随意 */
box-shadow: 0 0 5px #ccc;
position: relative;
}
select{
/* 清除select的边框样式 */
border: none;
/* 清除select聚焦时候的边框颜色 */
outline: none;
/* 将select的宽高等于div的宽高 */
width: 100%;
height: 40px;
line-height: 40px;
/* 隐藏select的下拉图标 */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* 通过padding-left的值让文字居中 */
padding-left: 60px;
}
使用伪类给select添加自己想用的图标
div:after{
content: "";
width: 14px;
height: 8px;
background: url('img/xiala.png') no-repeat center;
/* 通过定位将图标放在合适的位置 */
position: absolute;
right: 20px;
top: 45%;
/* 给自定义的图标实现点击下来功能 */
pointer-events: none;
}
页面的数字属性可以 通过计算获得
width:calc(33.3333% - (10px + 5px) * 2 - 15px )
/* 运算符要与数字之间必须有空格 */
页面的数字属性可以 通过计算获得
width:calc(33.3333% - (10px + 5px) * 2 - 15px )
/* 运算符要与数字之间必须有空格 */
波浪纹
.a_link, .entry a[href*='/study/']{
color:#f30;
text-decoration:underline;
padding:2px 0;
}
.a_link:hover,.entry a[href*='/study/']:hover{
color:#f30;
text-decoration:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
background-size:20px auto;
animation:waveMove 1s infinite linear;}
@keyframes waveMove {
from { background-position: 0 100%; }
to { background-position:-20px 100%; }
}
图片从彩色变为黑白色
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
transform转换
translate:移动
translate(50px,100p×) /* 向右平移50px,向下平移100px */
translateX(-50px) /* 向左平移50x */
translateY(30px) /* 向下平移30x */
translate3d(50px,100p×,40px)
/* 向右平移50px向下平移100x,向前平移了40p */
scae比例化
scale(05,2) /* X轴方向缩放为原来的0.5倍,Y轴方向拉伸为原来的2倍 */
scale(2) /* 元素等比例放大为原来的2倍 */
scaleX(3) /* X轴方向拉伸为原来的5倍 */
scaleY(0.2) /* Y轴方向缩放为原来的02倍 */
rotate旋转
rotate(75deg) /* 元素在平面上顺时针旋转75度 */
rotate(-30deg) /* 元素在平面上逆时针旋转30度 */
rotateX(75deg) /* 元素在X轴方向上顺时针旋转75度 */
rotateX(-30deg) /* 元素在X轴方向上逆时针旋转30度 */
rotateY(75deg) /* 元素在Y轴方向上顺时针旋转75度 */
rotateY(-30deg) /* 元素在Y轴方向上逆时针旋转30度 */
rotateZ(75deg) /* 元素在Z轴方向上顺时针旋转75度 */
rotateZ(-30deg) /* 元素在Z轴方向上逆时针旋转30度 */
skew 倾斜
skew(30deg,-45deg) /* 元素X轴和Y轴同时倾斜 */
skewX(30deg) /* 元素在X轴方向向左倾斜30度 */
skewY(-45deg) /* 元素在Y轴方向向上倾斜45度 */
解决overflow ios和安卓滑动延时问题
.content{
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* ios5+ */
over-flow: auto; /* winphone8和android4+ */
}
渐变背景色
.btn_bg{
background: -webkit-linear-gradient(#3da0fd,#427ef8)!important;
background: -o-linear-gradient(#3da0fd,#427ef8)!important;
background: -moz-linear-gradient(#3da0fd,#427ef8)!important;
background: linear-gradient(#3da0fd,#427ef8)!important;
color: #fff;
}
border-radius 详解
<div class="demo demo1"></div>
<div class="demo demo2"></div>
<style>
.demo{
width:200px;
height:200px;
background:#f00;
margin-top:10px;
}
.demo1{
border-radius:100% 50%;
}
.demo2{
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
}
</style>
效果如下
<div class="demo demo1"></div>
<div class="demo demo2"></div>
<style>
.demo{
width:200px;
height:200px;
background:#f00;
margin-top:10px;
}
.demo1{
border-radius:100% 50%;
}
.demo2{
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
}
</style>
css 实现对话框角标
<div class="jiaobiao1"></div>
<div class="jiaobiao2"></div>
<style>
.jiaobiao{
width:0px;height:0px;margin:20px;
}
.jiaobiao1{
width:0px;height:0px;margin:20px;
/* border-top:50px solid #ccc; /
border-left:50px solid transparent;
border-bottom:50px solid #f00;
border-right:50px solid transparent;
/ transparent(颜色透明) /
}
.jiaobiao2{width:300px;height:50px;background:#fff;position:relative;border-radius:5px;}
.jiaobiao2::before{
content:’’;
position:absolute;left:-10px;top:15px;
width:0px;height:0px;
border-top:10px solid transparent;
border-right:10px solid #fff;
border-bottom:10px solid transparent;
/ transparent(颜色透明) */
}
.p-img{display: block; overflow: hidden;}
.p-img img{width: 100%; height: 100%;}
.p-img img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
</style>
元素鼠标经过放大效果
<div class="big_box">
<div class="big_c"></div>
</div>
<style>
.big_box{
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width:300px;
height:300px;
background:#fff;
}
.big_box .big_c{width: 80%; height: 80%;background:#f0f;}
.big_box .big_c:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
</style>
发表评论
评论列表
- 这篇文章还没有收到评论,赶紧来抢沙发吧~