<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>这是三个煎蛋</title>

        <style type="text/css">

            /*这是第一个煎蛋*/

            #oneegg{

                width: 100px;

                height: 100px;

                border: 50px solid #FFFFCC;

                background-color: #FFFF00;

                border-radius: 100px;

            }

            /*这是第二个煎蛋*/

            #twoegg{

                width: 200px;

                height: 200px;

                background-color: #FFFFCC;

                border-radius: 100px;

                overflow: hidden;

            }

            #twoegg .danhuang{

                width: 100px;

                height: 100px;

                background-color: #FFFF00;

                border-radius: 50px;

                margin-top:50px ;

                margin-left: 50px;

            }

            /*这是第三个煎蛋*/

            #threeegg{

                width: 200px;

                height: 200px;

                background-color: #FFFF00;

                box-shadow: 0px 0px 0px 50px #FFFFCC inset;

                border-radius: 100px;

            }

        </style>

    </head>

    <body>

        <!--这是第一个煎蛋-->

        <div id="oneegg"></div>

        <!--这是第二个煎蛋-->

        <div id="twoegg">

            <div class="danhuang"></div>

        </div>

        <!--这是第三个煎蛋-->

        <div id="threeegg"></div>

    </body>

</html>

CSS小技巧-煎蛋的画法~的更多相关文章

  1. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  2. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  3. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

  4. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

  5. CSS 小技巧 | 一行代码实现头像与国旗的融合

    到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...

  6. 模仿也是提高，纯css小技巧实现头部进度条

    刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...

  7. Css 小技巧总结

    相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会 ...

  8. Web前端开发基础 第四课（CSS小技巧1）

    垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class=&q ...

  9. CSS小技巧使用

    1.清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .c ...

随机推荐

  1. SSH整合总结（xml与注解）

    本人自己进行的SSH整合,中间遇到不少问题,特此做些总结,仅供参考. 一.使用XML配置: SSH版本 Struts-2.3.31 Spring-4.3.5 Hibernate-4.2.21 引入ja ...

  2. 111_climbing-stairs

    /*@Copyright:LintCode@Author:   Monster__li@Problem:  http://www.lintcode.com/problem/climbing-stair ...

  3. Java设计模式：桥接模式

    问题提出 生活中有很多事物集合,设为A1,A2......Am ,而每个事物都有功能F1,F2....Fn. 例如邮局的发送业务.简单模拟有两类事物:信件和包裹,均有平邮和挂号邮寄功能.程序设计中如何 ...

  4. java spring mvc 全注解

    本人苦逼学生一枚,马上就要毕业,面临找工作,实在是不想离开学校.在老师的教导下学习了spring mvc ,配置文件实在繁琐,因此网上百度学习了spring mvc 全注解方式完成spring的装配工 ...

  5. spring学习总结二-----面向切面编程（AOP）思想

    上一篇spring博客简总结了spring控制反转和依赖注入的相关思想知识点,这篇博文对spring的面向切的编程思想进行简单的梳理和总结. 一.面向切面的思想 与面向对象的纵向关系概念不同,面向切面 ...

  6. [bug] Cannot proceed because system tables used by Event Scheduler were found damaged at server start

    本地:mac 10.12.3  mysql 5.6 远程:linux 7.3    mysql 5.7.18.  (远程数据库yum安装,又5.6升级到5.7) 步骤:从本地数据库导出数据到远程数据库 ...

  7. 蓝桥杯- 移动距离-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  8. windows下使用IIS的ARR实现站点的负载均衡

    1)    目的: 访问localhost:18066 对下边两个端口负载 localhost:18098 localhost:18099 2)    手段: 1.通过nginx 2.通过iis的AR ...

  9. 运算符重载 与 sort()

    运算符重载与sort() 二话不说上代码: #include <iostream> #include <algorithm> using namespace std; stru ...

  10. Java中的锁分类

    在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏向锁/轻量级 ...