<!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. DOM的发展，DOM0,DOM1,DOM2,DOM3

    Documentc Object Model文档对象模型是针对XML但经过扩展用于HTML的应用程序接口(API Application programming Interface).DOM把整个界面 ...

  2. 从Chrome源码看JS Array的实现

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...

  3. angular 自定义filter

    用modul.filter .filter("fiilterCity",function(){ return function(obj){ var newObj = []; ang ...

  4. mvc中razor的一个bug

    具体东西就不多说了,所有编译,代码都是木有问题的. 结果预览页面的时候竟然告诉我编译错误,尼玛这不科学啊. 来看看错误页面 看着问题大概应该是缺少} ,或者多了个} 倒置的编译错误才对,但是编译生成完 ...

  5. NuGet（Nuget Packages）

    Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中添加.移除和更新引 ...

  6. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  7. Java 8 Lambda 表达式

    Lambda 是啥玩意 简单来说,Lambda 就是一个匿名的方法,就这样,没啥特别的.它采用一种非常简洁的方式来定义方法.当你想传递可复用的方法片段时,匿名方法非常有用.例如,将一个方法传递给另外一 ...

  8. JS设计模式---缓存代理

    缓存代理可以为一些开销大的运算结果提供暂时的存储,在下次运算的时候,传进来的参数跟上次是一致, 则可以直接返回前面存储的结果. 运行上面的代码我们发现,当第二次再调用proxyMult(1,2,3)的 ...

  9. ElasticSearch-5.3.1集群环境搭建，安装ElasticSearch-head插件，安装错误解决

    说起来甚是惭愧,博主在写这篇文章的时候,还没有系统性的学习一下ES,只知道可以拿来做全文检索,功能很牛逼,但是接到了任务不想做也不行, leader让我搭建一下分布式的ES集群环境,用来支持企业信用数 ...

  10. 二分图的最大匹配——最大流EK算法

    序: 既然是个图,并且求边数的最大值.那么这就可以转化为网络流的求最大流问题. 只需要将源点与其中一子集的所有节点相连,汇点与另一子集的所有节点相连,将所有弧的流量限制置为1,那么最大流 == 最大匹 ...