新手玩CSS中的一些黑科技

哎哎

1、鼠标移进网页里,不见了= =

*{
    cursor: none!important;
}

2、简单的文字模糊效果

*{
    color: transparent;
    text-shadow: #111 0 0 5px;
}

3、多重边框

.div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

4、实时编辑CSS

<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>

5、CSS中简单运算

.div{
    width: calc(100% - 500px);
}

6、border-radius

因为基本上很多人都是这么用的:

.div {
     border-radius: 4px;
}

稍微高端一点的是这样的:

.div {
    border-radius: 4px 6px 6px 4px;
}

v

然而,终极黑科技是这样用的:

.div {
     border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

border-radius 它可以赋8个值:
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,
各个数字就分别代表四个不一样的方向。

7、outline-offset

在input下写CSS的时候对下面的语句会很熟悉:

input {
    outline : none;
}

input:focus {
    outline : none;
}

这就是将input输入框去掉默认的蓝线框的方法。

CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离:

input {
    outline-offset: 4px ;
}
(web前端学习交流群:328058344 禁止闲聊,非喜勿进!) 

调节该属性值的大小你就可以看到outline的距离变化了。

最后献上一同事实习前的大白demo

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Baymax</title>
        <link rel=stylesheet href="demo2.css"/>
    </head>
    <style>
           body {
                background: #595959;
            }
            #baymax{
             /*设置为 居中*/
                margin: 0 auto;

                /*高度*/
                height: 600px;

                /*隐藏溢出*/
                overflow: hidden;
            }

            #head{
                height: 64px;
                width: 100px;

                /*以百分比定义圆角的形状*/
                border-radius: 50%;

                /*背景*/
                background: #fff;
                margin: 0 auto;
                margin-bottom: -20px;

                /*设置下边框的样式*/
                border-bottom: 5px solid #e0e0e0;

                /*属性设置元素的堆叠顺序;    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
                z-index: 100;

                /*生成相对定位的元素*/
                position: relative;
            }
            #eye,
            #eye2{
                width: 11px;
                height: 13px;
                background: #282828;
                border-radius: 50%;
                position: relative;
                top: 30px;
                left: 27px;

                /*旋转该元素*/
                transform: rotate(8deg);
            }

            #eye2{
                /*使其旋转对称*/
                transform: rotate(-8deg);
                left: 69px;    top: 17px;
            }

            #mouth{
                width: 38px;
                height: 1.5px;
                background: #282828;
                position: relative;
                left: 34px;
                top: 10px;
            }
            /*躯干和腹部*/

            #torso,
            #belly{
                margin: 0 auto;
                height: 200px;
                width: 180px;
                background: #fff;
                border-radius: 47%;

                /*设置边框*/
                border: 5px solid #e0e0e0;
                border-top: none;
                z-index: 1;
            }

            #belly{
                height: 300px;
                width: 245px;
                margin-top: -140px;
                z-index: 5;
            }

            #cover{
                width: 190px;
                background: #fff;
                height: 150px;
                margin: 0 auto;
                position: relative;
                top: -20px;
                border-radius: 50%;
            }
            /*心脏*/

            #heart{
              width:25px;
              height:25px;
              border-radius:50%;
              position:relative; 

              /*向边框四周添加阴影效果*/
              box-shadow:2px 5px 2px #ccc inset; 

              right:-115px;
              top:40px;
              z-index:111;
              border:1px solid #ccc;
            }
            /*手臂*/
            #left-arm,
            #right-arm{
                height: 270px;
                width: 120px;
                border-radius: 50%;
                background: #fff;
                margin: 0 auto;
                position: relative;
                top: -350px;
                left: -100px;
                transform: rotate(20deg);
                z-index: -1;
            }

            #right-arm{
                transform: rotate(-20deg);
                left: 100px;
                top: -620px;
            }
            /*手指头*/

            #l-bigfinger,
            #r-bigfinger{
                height: 50px;
                width: 20px;
                border-radius: 50%;
                background: #fff;
                position: relative;
                top: 250px;
                left: 50px;
                transform: rotate(-50deg);
            }

            #r-bigfinger{
                left: 50px;
                transform: rotate(50deg);
            }

            #l-smallfinger,
            #r-smallfinger{
                height: 35px;
                width: 15px;
                border-radius: 50%;
                background: #fff;
                position: relative;
                top: 195px;
                left: 66px;
                transform: rotate(-40deg);
            }

            #r-smallfinger{
                background: #fff;
                transform: rotate(40deg);
                top: 195px;
                left: 37px;
            }
            /*大腿*/
            #left-leg,
            #right-leg{
                height: 170px;
                width: 90px;
                border-radius: 40% 30% 10px 45%;
                background: #fff;
                position: relative;
                top: -640px;
                left: -45px;
                transform: rotate(-1deg);
                z-index: -2;
                margin: 0 auto;
            }

            #right-leg{
                background: #fff;
                border-radius:30% 40% 45% 10px;
                margin: 0 auto;
                top: -810px;
                left: 50px;
                transform: rotate(1deg);
            }

    </style>
<body>

     <div id="baymax">

        <!-- 定义头部,包括两个眼睛、嘴 -->
        <div id="head">
            <div id="eye"></div>
            <div id="eye2"></div>
            <div id="mouth"></div>
        </div>

        <!-- 定义躯干,包括心脏 -->
        <div id="torso">
            <div id="heart"></div>
        </div>

        <!-- 定义肚子腹部,包括 cover(和躯干的连接处) -->
        <div id="belly">
            <div id="cover"></div>
        </div>

        <!-- 定义左臂,包括一大一小两个手指 -->
        <div id="left-arm">
            <div id="l-bigfinger"></div>
            <div id="l-smallfinger"></div>
        </div>

        <!-- 定义右臂,同样包括一大一小两个手指 -->
        <div id="right-arm">
            <div id="r-bigfinger"></div>
            <div id="r-smallfinger"></div>
        </div>

        <!-- 定义左腿 -->
        <div id="left-leg"></div>

        <!-- 定义右腿 -->
        <div id="right-leg"></div>

    </div>
</body>
<html>

时间: 2024-10-15 15:52:22

新手玩CSS中的一些黑科技的相关文章

【2016.12.08】CSS中的一些黑科技2

1.border-radius 基本上很多人都是这么用的: .div { border-radius: 4px; } 稍微高端一点 .div { border-radius: 4px 6px 6px 4px; } 终极黑科技是这样用的 .div { border-radius: 10px 10px 30px 2px / 50px 50px 10px 3px; } 效果如图: border-radius 它可以赋8个值:斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不

【2016.12.02】CSS中的一些黑科技

1.鼠标移进网页里,不见了= = *{ cursor: none!important; } 2.简单的文字模糊效果 *{ color: transparent; text-shadow: #111 0 0 5px; }

黑科技!仅需 3 行代码,就能将 Gitter 集成到个人网站中,实现一个 IM 即时通讯聊天室功能?

欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.exception.site/essay/how-to-use-gitter-on-your-website-quickly 一.前言 小哈从很早以前就有写博文的习惯,不过那个时候,也没咋认真地写,倒是挺喜欢倒腾,从最初在 CSDN 写博客,写了得有 100 多篇后,那时,CSDN 开始加入了恶心的广告,体验开始

几个css黑科技

这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性. .box { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; } 斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向. input { outline-offset: 4px ; } 调节该属性值的大小你就可以看到outline的距离变化了. ol li:nth-child(n+7):nth-child(-n+14) { ba

【CSS黑科技1】使用CSS的currentColor变量写DRY代码

| 导语 如果你已经是sass或者less的用户,你肯定已经在你的样式表中用过变量了,也知道有变量的存在,会非常灵活好用,如果你没用过,那一定很想在普通的css中有变量的存在,那么我们就来认识一下这个特殊的变量吧: currentColor 变量的好处 css中,如果有变量的使用,会让我们的代码能DRY(don't repeat youself :特指在程序设计以及计算中避免重复代码,因为这样会降低灵活性.简洁性,并且可能导致代码之间的矛盾),特别是在我们管理维护大型项目的时候非常好用,因为这往

华为云PaaS大型互动专场,邀您体验趣玩黑科技!

[活动进行中] 华为云PaaS大型互动专场,邀您体验趣玩黑科技! ? ?? ???3月14日,华为云PaaS专场活动正式上线!趣味新奇的demo体验.垂直于技术分享的专家咨询,以及中奖率超高的有奖问答等等环节,为技术宅们提供了一场Geek盛宴. ? ?? ?华为云服务适用于不同行业多种业务场景,帮助不同框架的应用轻松上云,实现分布式云环境的高效运行.自动化运维,使能企业应用快速创新.华为云服务涵盖企业云化上云前后各个阶段以及七类应用场景,一直备受开发爱好者关注. ? ?? ? 在本次华为云服务开

原来css中的border还可以这样玩

原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样

css中的border还可以这样玩

在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样我们就可以得到一个圆形的效果,代码如下: html代

Python3网络爬虫(十一):爬虫黑科技之让你的爬虫程序更像人类用户的行为(代理IP池等)

原文链接: Jack-Cui,http://blog.csdn.net/c406495762 运行平台: Windows Python版本: Python3.x IDE: Sublime text3 1 前言 近期,有些朋友问我一些关于如何应对反爬虫的问题.由于好多朋友都在问,因此决定写一篇此类的博客.把我知道的一些方法,分享给大家.博主属于小菜级别,玩爬虫也完全是处于兴趣爱好,如有不足之处,还望指正. 在互联网上进行自动数据采集(抓取)这件事和互联网存在的时间差不多一样长.今天大众好像更倾向于