云迈博客

您现在的位置是:首页 > 前端技术 > css相关 > 正文

css相关

select样式修改

俗人将庸2020-08-04css相关364
select样式修改芝士奶油样式部分div{/*用div的样式代替select的样式*/width:200px;heigh

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>

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~