<!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. 如何选择合适的PHP开发框架

    PHP作为一门成熟的WEB应用开发语言,已经深受广大开发者的青睐.与此同时,各式各样的PHP开发框架也从出不穷,面对如此多而且良莠不齐的开发框架,开发者们想必都会眼花缭乱,不知道该选择用哪个.其实并没 ...

  2. Druid Indexing 服务

    索引服务由三个主要组件:一个是peon 组件,可以运行一个任务,一个是Middle Managers组件,管理peons,和一个overlord 组件管理任务分发给Middle Managers. o ...

  3. html运用以及工具

    对于这个教程,我建议你只使用最简单的工具.例如:Notepad(在windows里),TextEdit(在Mac上)或是KEdit(在KDE里)就可以了.一旦你了解这个原理,你就会想要切换到更高级的工 ...

  4. Hadoop安全机制之令牌

    介绍 Hadoop中的安全机制包括认证和授权.而Hadoop RPC中采用SASL(Simple Authentication and Security Layer,简单认证和安全层)进行安全认证,具 ...

  5. GTK简单了解记录

    GTK+http://zh.wikipedia.org/wiki/GTK%2B#.E5.9B.BE.E5.BD.A2.E6.97.A0.E5.85.B3.E4.BB.A3.E7.A0.81 GTK+最 ...

  6. Tomcat 热部署

    Tomcat热部署就是实现不停机的发布项目和更新项目 1.修改conf目录下的tomcat-users.xml文件 在<tomcat-user>添加如下配置 [root@localhost ...

  7. C++接口的定义与实现的详细过程

    1.接口的定义与实现 所谓的接口,即将内部实现细节封装起来,外部用户用过预留的接口可以使用接口的功能而不需要知晓内部具体细节.C++中,通过类实现面向对象的编程,而在基类中只给出纯虚函数的声明,然后在 ...

  8. 如何设置自适应当前浏览器高度的div块

    嗯 就是下面这样 <!DOCTYPE html> <head> <title>adaptive this page size</title> <s ...

  9. .net Ajax与后台一般处理程序(ashx) 交互

    本文主要实现无动态刷新查询后台数据功能,主要用到ajax+ashx+sqlserver进行交互. 首先需要引用Jquery: <script language="javascript& ...

  10. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...