前端常用的CSS代码块（二）

web小门神 lv.1

发布时间：2023-02-18 02:12:16 432

相关标签： # 前端# css# html# webkit

用html+css可以很方便的进行网页的排版布局，但不是每一种属性或者代码都会记得。下面分享一些常用的代码块。

前端常用的CSS代码块（二）_PHP开发

1、自定义文本选择

::selection { background: #e2eae2; }

2、图片边框偏光

img.polaroid {
    background:#000; 
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333; 
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; 
    width:200px;  
}

3、锚链接伪类

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

4、全屏背景图

html { 
    background: url('bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}

5、内容垂直居中

.center {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

6、强制出现垂直滚动条

html { height: 101% }

7、CSS3渐变模板

.bg {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    background-image: linear-gradient(top, #83b842, #629721);
}

8、@font-face引用

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') 
    url('webfont.woff') format('woff'), 
    url('webfont.ttf')  format('truetype'),
    url('webfont.svg#svgFontName') format('svg');
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}

9、连接CSS3元素

p {
    position:relative;
    z-index:1;
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left :3px;
    right: 3px;
    border: 2px dashed #fff;
}
p a {
    color: #fff;
    text-decoration:none;
}
p a:hover, p a:focus, p a:active {
    text-decoration:underline;
}

10、CSS斑马线

tbody tr:nth-child(odd) {
    background-color: #ccc;
}

文章来源： https://blog.51cto.com/u_15682900/5440292

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。