web前端常用的css样式总结

发布时间:2021年07月20日 阅读:574 次

H5移动端网页头部定义:

<meta name="format-detection" content="address=no;email=no;telphone=no"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


去掉input输入框默认的黄色背景:

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

    background-color: rgb(0, 0, 0) !important;

    background-image: none !important;

    color: rgb(0, 0, 0) !important;

    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;

    -webkit-box-shadow: 0 0 0px 1000px white inset !important;

}


内阴影:

-webkit-box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.125);

-moz-box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.125);

box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.125);


四周阴影:

 box-shadow: 0 0 10px #777;

-webkit-box-shadow: 0 0 10px #777;

-moz-box-shadow: 0 0 10px #777;


左上阴影:

 box-shadow: -10px -10px #777;

-webkit-box-shadow: -10px -10px #777;

-moz-box-shadow: -10px -10px #777;


右下阴影:

 box-shadow: 5px 5px 5px #777;

-webkit-box-shadow: 5px 5px 5px #777;

-moz-box-shadow: 5px 5px 5px #777;


右下阴影:

 box-shadow: 5px 5px 5px 5px #777;

-webkit-box-shadow: 5px 5px 5px 5px #777;

-moz-box-shadow: 5px 5px 5px 5px #777;


右边阴影:

box-shadow:1px 0 1px #173c67;

-webkit-box-shadow: 1px 0 1px #173c67;

-moz-box-shadow:1px 0 1px #173c67;


下阴影:

box-shadow: 0px 2px 2px #ccc;

-webkit-box-shadow: 0px 2px 2px #ccc;

-moz-box-shadow: 0px 2px 2px #ccc;


input{

transition:all 0.30s ease-in-out;

-webkit-transition: all 0.30s ease-in-out;

-moz-transition: all 0.30s ease-in-out;

border:#35a5e5 1px solid;

border-radius:3px;

outline:none;

}

input:focus{

box-shadow:0 0 5px rgba(81, 203, 238, 1);

-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);

-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);

}


textarea{transition:all 0.30s ease-in-out;

-webkit-transition: all 0.30s ease-in-out;

-moz-transition: all 0.30s ease-in-out;

border:#35a5e5 1px solid;

border-radius:3px;

outline:none;}


textarea:focus{box-shadow:0 0 5px rgba(81, 203, 238, 1);

-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);

-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);}


内容垂直居中

相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

.container {

    min-height: 6.5em;

    display: table-cell;

    vertical-align: middle;

}


CSS3的全屏背景效果

如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。

html {

    background: url('images/bg.jpg') no-repeat center center fixed; 

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

}


鼠标划过淡入淡出效果

a{ -webkit-transition: opacity 1s ease-in-out;

    -moz-transition: opacity 1s ease-in-out;

    -o-transition: opacity 1s ease-in-out;

    transition: opacity 1s ease-in-out;

}

a:hover{

 opacity:0.7;

 filter: alpha(opacity=0.7);

}


圆角代码

1.四个角全部是圆角的代码:

#container {

    -webkit-border-radius: 4px 3px 6px 10px;

    -moz-border-radius: 4px 3px 6px 10px;

    -o-border-radius: 4px 3px 6px 10px; 

    border-radius: 4px 3px 6px 10px;

}

2.给每个角分别设置圆角代码:

#container {

    -webkit-border-top-left-radius: 4px;

    -webkit-border-top-right-radius: 3px;

    -webkit-border-bottom-right-radius: 6px;

    -webkit-border-bottom-left-radius: 10px;

    -moz-border-radius-topleft: 4px;

    -moz-border-radius-topright: 3px;

    -moz-border-radius-bottomright: 6px;

    -moz-border-radius-bottomleft: 10px;

}

 



打赏
Tag:html web前端 css
相关文章