巧妙利用border和background-clip

 

		<div class="eye"></div>

		.eye{
width:150px;
height:150px;
padding:10px;
border:10px solid;
border-radius:50%;
background-color: currentcolor;
background-clip: content-box;
}

一个div实现白眼效果的更多相关文章

  1. JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

  2. 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  3. CSS3利用一个div实现内圆角边框效果

    *首先要清楚的是,box-shadow的形状会随着border-radius变化.下面的例子可以证明: <!doctype html> <html lang="en&quo ...

  4. 一个div,包含两个div,调整文字位置和div平均分布

    网页中经常会用到,一个div下平均分布两个小的div,两个小的div,显示的内容为图片还比较好处理,显示文字则不好控制效果,今天写了一个如图效果的 html: <div class=" ...

  5. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  6. 问题:关于坛友的一个js轮播效果的实现

    需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件,转到下一个时 ...

  7. 一个Banner广告收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css笔记:如何让一个div居于页面正中间

    如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...

  9. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

随机推荐

  1. HDOJ 5639 Transform

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5637 题意:有一个数x,你可以对x进行两种操作,1.反转x二进制其中任意一位2.x^y(y题目给出), ...

  2. codeforces 1077F2. Pictures with Kittens (hard version)单调队列+dp

    被队友催着上(xun)分(lian),div3挑战一场蓝,大号给基佬紫了,结果从D开始他开始疯狂教我做人??表演如何AKdiv3???? 比赛场上:A 2 分钟,B题蜜汁乱计数,结果想得绕进去了20多 ...

  3. Linux-GitLab安装及汉化

    gitlab 安装及汉化 GitLab简介: GitLab是一个用于仓库管理系统的开源项目.使用Git作为代码管理工具,并在此基础上搭建起来的Web服务.可通过Web界面进行访问公开的或者私人项目.它 ...

  4. (转)如何阅读OpenStack源码

    1 关于该项目 本项目使用在线绘图工具web sequencediagrams完成,目标是图形化OpenStack的所有操作流程,通过操作序列图能快速学习Openstack的工作原理,理清各个组件的关 ...

  5. SpringBoot系列: Spring支持的异常处理方式

    ===================================视图函数返回 status code 的方式===================================Spring 有 ...

  6. Aurora — 一个在 MSOffice 内输入 LaTeX 公式的很好用插件

    from http://blog.csdn.net/GarfieldEr007/article/details/51452986 工具名称:Aurora2x  (下载) 压缩包内有详细的安装说明. 刚 ...

  7. Design Principles and Design Patterns

    设计原则解读. 设计原则是对设计模式的约束性要求,属于设计中基本的四项特征,不符合此四项特征的设计,不具有生命力. 设计模式也是在此四项设计原则上的具体化实例化衍生物. Martin原文: http: ...

  8. Groovy 设计模式 -- 组合模式

    Composite Pattern http://groovy-lang.org/design-patterns.html#_chain_of_responsibility_pattern 组合模式, ...

  9. [译]Ocelot - Logging

    原文 Ocelot使用标准的日志接口ILoggerFactory和ILogger<T>.它们封装在IOcelotLogger 和 IOcelotLoggerFactory中,因为ocelo ...

  10. Jupyter NoteBook功能介绍

    一.Jupyter Notebook 介绍 文学编程 在介绍 Jupyter Notebook 之前,让我们先来看一个概念:文学编程 ( Literate programming ),这是由 Dona ...