<!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. 浩哥解析MyBatis源码（十）——Type类型模块之类型处理器

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6715063.html 1.回顾 之前的两篇分别解析了类型别名注册器和类型处理器注册器,此二 ...

  2. 在github上搭建免费的博客

    github好多年前,大家都开始玩啦,我这个菜鸟近几年才开始.github不仅可以管理项目,还可以搭建博客.技术人员,一般用的博客为博客园,CSDN多一些.看到朋友们都弄一个,我也开始弄起来,先找点资 ...

  3. Omi全新版本来袭 - 指令系统

    写在前面 Omi框架到目前为止有三种版本. omi.js 使用 sodajs 为内置指令系统 omi.lite.js 不包含任何模板引擎 omi.mustache.js 使用 mustache.js为 ...

  4. DevExpress ChartControl 设置它的标题

    private void SetHZTitle(ref ChartControl chartControl, string HTitle) { chartControl.Titles.Clear(); ...

  5. Servlet3.0新特性（从注解配置到websocket编程）

    Servlet3.0的出现是servlet史上最大的变革,其中的许多新特性大大的简化了web应用的开发,为广大劳苦的程序员减轻了压力,提高了web开发的效率.主要新特性有以下几个: 引入注解配置 支持 ...

  6. css过渡模块和2d转换模块

    今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...

  7. jsp实现仿QQ空间新建多个相册名称，向相册中添加照片

    工具:Eclipse,Oracle,smartupload.jar:语言:jsp,Java:数据存储:Oracle. 实现功能介绍: 主要是新建相册,可以建多个相册,在相册中添加多张照片,删除照片,删 ...

  8. Struts2框架的基本使用

         前面已经介绍过了MVC思想,Struts2是一个优秀的MVC框架,大大降低了各个层之间的耦合度,具有很好的扩展性.从本篇开始我们学习Struts2的基本用法,本篇主要包括以下内容: Stru ...

  9. 【转】为什么delete以后指针还能被赋值

    首先,系统知道哪一部分堆的线性空间被占掉了,new就是起这个作用,仅仅是声明一下(可能多了一个功能),因为堆的空间不一定是直接从系统调用获得的,堆的空间是这样管理的:程序先伸请一个大的堆空间,这个时候 ...

  10. 01背包Bone Collector

    好几天没写博客了,整天忙着打比赛,希望能有参加省赛的资格,不容易啊. 今天复习背包,之前集训讲过,现在又忘了,昨天杭电校赛刚好有一题背包,居然不会做了,好尴尬,重新复习一下. https://vjud ...