<!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. Spring配置数据源的几种方法

    一:数据源的配置1.通过JNDI配置数据源    1.在tomcat context.xml中配置数据源        <Resource name="jdbc/ds" au ...

  2. CodeSmith生成实体的分页读取规则

    首先.我得向咱们博客园提个意见,能不能我写的东西就给预保存下呢?刚才我写半天,只因为这个不给力的IE浏览器死了,导致我白写了,如果这要是那个大神直接在这上面写的非常有技术含量的贴着会因此而丢失实在是有 ...

  3. [进程管理]Linux进程状态解析之T、Z、X

             Linux进程状态:T (TASK_STOPPED or TASK_TRACED),暂停状态或跟踪状态.          向进程发送一个SIGSTOP信号,它就会因响应该信号而进入 ...

  4. 原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果（scroll（）、offsetTop、滚动监听的妙用）

    想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更 ...

  5. RedHat 7.1 下安装 Zabbix监控程序详解（适合linux初级用户）

    RedHat 7.1 安装 Zabbix 监控程序详解(适合对linux初级用户)2017-05-02 安装步骤: 1.zabbix需要安装LAMP架构 2.安装zabbix服务 3.初始化zabbi ...

  6. 01背包Bone Collector

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

  7. 亲测可用！！！golang如何在idea中保存时自动进行代码格式化

    亲测可用,golang在idea中的代码自动格式化 1.ctrl+alt+s打开设置界面,选择[Plugins] -> [Install JetBrains plugin...] -> 搜 ...

  8. C#基础知识-数据类型（一）

    俗话说温故而知新,学习一门知识最好的方法就是不断的去咀嚼回味,学习编程更是如此.对于.NET平台中的C#语言而言,有着强大的类库.不断的在更新迭代几乎每隔一年都会更新一个新的模块,.NET Framw ...

  9. Python简要学习笔记

    1.搭建学习环境 推荐ActivePython,虽然此乃为商业产品,却是一个有自由软件版权保证的完善的Python开发环境,关键是文档以及相关模块的预设都非常齐备. ActivePython下载地址: ...

  10. Ehcache 的简单实用 及配置

    Ehcache 与 spring 整合后的用法,下面是一个Ehcache.xml配置文件: 通用的缓存策略 可以用一个 cache: <?xml version="1.0" ...