温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

几个超级实用的css代码片段

发布时间:2020-08-14 12:37:34 来源:ITPUB博客 阅读:123 作者:freebus 栏目:web开发

1、伸展一个元素到窗口高度

  在具体场景中,你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,我们需要伸展顶层元素:html和body:

html, 

body {

    height: 100%;

}

  然后将100%应用到任何元素的高:

div {

    height: 100%;

}

2、只在一边或两边显示盒子阴影

  如果你要一个盒阴影,试试这个技巧,能为任一边添加阴影。为了实现这个,首先定义一个有具体宽高的盒子,然后正确定位:after伪类。实现底边阴影的代码如下:

.box-shadow {

    background-color: #FF8020;

    width: 160px;

    height: 90px;

    margin-top: -45px;

    margin-left: -80px;

    position: absolute;

    top: 50%;

    left: 50%;

}

.box-shadow:after {

    content: "";

    width: 150px;

    height: 1px;

    margin-top: 88px;

    margin-left: -75px;

    display: block;

    position: absolute;

    left: 50%;

    z-index: -1;

    -webkit-box-shadow: 0px 0px 8px 2px #000000;

       -moz-box-shadow: 0px 0px 8px 2px #000000;

            box-shadow: 0px 0px 8px 2px #000000;

}

3、制造模糊文本

  想要让文本模糊?可以使用color透明和text-shadow实现。

.blurry-text {

   color: transparent;

   text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

3、新版清除浮动(2011)

.clearfix:before, .container:after { content: ""; display: table; }

.clearfix:after { clear: both; }

/* IE 6/7 */

.clearfix { zoom: 1; }

4、通用媒体查询

/* Smartphones (portrait and landscape) ----------- */

@media only screen 

and (min-device-width : 320px) and (max-device-width : 480px) {

  /* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) {

  /* Styles */

}

/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) {

  /* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

  /* Styles */

}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

  /* Styles */

}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

  /* Styles */

}

/* Desktops and laptops ----------- */

@media only screen and (min-width : 1224px) {

  /* Styles */

}

/* Large screens ----------- */

@media only screen and (min-width : 1824px) {

  /* Styles */

}

/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

  /* Styles */

}

5、强制出现垂直滚动条

html { height: 101% }

6、CSS3 斑马线

tbody tr:nth-child(odd) {

    background-color: #ccc;

}

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI