巧妙利用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. Codeforces878 A. Short Program

    题目类型:位运算 传送门:>Here< 题意:给出\(N\)个位运算操作,要求简化操作数量,使之结果不受影响(数据在1023之内) 解题思路 我们发现数字的每一位是独立的.也就是说,每一个 ...

  2. GiBbook实用配置以及插件

    GitBook可以在您的计算机上用于构建本地书籍,,可以本地预览 安装gitbook 环境要求: 安装GitBook,您的系统需要安装NodeJS(推荐v4.0.0及以上版本) NodeJS下载地址 ...

  3. Ubuntu 服务器上面--安装和配置mysql 【转】

    更新源列表 打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入root用户的密码"--> ...

  4. Springboot 1.简介 及第一个demo

    按照官网上的新建一个maven项目,然后将类引入pom.xml文件中 <?xml version="1.0" encoding="UTF-8"?> ...

  5. openstack项目【day24】:keystone部署及操作

    阅读目录 一 前言 二 版本信息 三 部署keystone 四 keystone操作 五 验证 六 创建脚本 七 keystone使用套路总结 一 前言 任何软件的部署都是没有技术含量的,任何就部署讲 ...

  6. 2018-2019-2 《Java程序设计》第5周学习总结

    20175319 2018-2019-2 <Java程序设计>第5周学习总结 教材学习内容总结 本周学习<Java程序设计>第六章: 接口 实现接口 接口的UML图 接口回调 ...

  7. java poi 操作ppt

    java poi 操作ppt 可以参考: https://www.w3cschool.cn/apache_poi_ppt/apache_poi_ppt_installation.html http:/ ...

  8. PyQt5之窗口类型

    [TOC] 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 写在开头 1.1 本文内容 本文的主要内容:PyQt中的窗口部件:QMainWindow,QWidget,QDialog. 上述三 ...

  9. [Android] Android 锁屏实现与总结 (一)

    实现锁屏的方式有多种(锁屏应用.悬浮窗.普通Activity伪造锁屏等等).但国内比较主流并且被广泛应用的Activity伪造锁屏方式. 实例演示图片如下: 系列文章链接如下: [Android] A ...

  10. 【转载】C++ vector的用法

    http://www.cnblogs.com/Nonono-nw/p/3462183.html