巧妙利用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. 倍增\ tarjan求lca

    对于每个节点v,记录anc[v][k],表示从它向上走2k步后到达的节点(如果越过了根节点,那么anc[v][k]就是根节点). dfs函数对树进行的dfs,先求出anc[v][0],再利用anc[v ...

  2. jzoj6101. 【GDOI2019模拟2019.4.2】Path

    题目链接:https://jzoj.net/senior/#main/show/6101 记\(f_i\)为从\(i\)号点走到\(n\)号点所花天数的期望 那么根据\(m\)条边等可能的出现一条和一 ...

  3. P1494 [国家集训队]小Z的袜子

    题目 P1494 [国家集训队]小Z的袜子 解析 在区间\([l,r]\)内, 任选两只袜子,有 \[r-l+1\choose2\] \[=\frac{(r-l+1)!}{2!(r-l-1)!}\] ...

  4. [FJOI2016]建筑师

    题目描述 小 Z 是一个很有名的建筑师,有一天他接到了一个很奇怪的任务:在数轴上建 n 个建筑,每个建筑的高度是 1 到 n 之间的一个整数. 小 Z 有很严重的强迫症,他不喜欢有两个建筑的高度相同. ...

  5. hdu 1848 简单SG函数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1848 Problem Description 任何一个大学生对菲波那契数列(Fibonacci num ...

  6. Numpy系列(十)- 掩码数组

    简介 有时候数据集中存在缺失.异常或者无效的数值,我们可以标记该元素为被屏蔽(无效)状态. import numpy as np import numpy.ma as ma x = np.array( ...

  7. PyQt5开发环境搭建

    一 写在开头1.1 本节内容开个新坑—“PyQt5系列”,慢慢填.本文主要内容为PyQt5开发环境的搭建. 注意:PyQt 5.10以上的版本在Python 3.6中有BUG,PyQt 5.10版本是 ...

  8. 第七节:WebApi与Unity整合进行依赖注入和AOP的实现

    一. IOC和DI 1. 通过Nuget引入Unity程序集. PS:[版本:5.8.6] 2. 新建DIFactory类,用来读取Unity的配置文件并创建Unity容器,需要注意的是DIFacto ...

  9. 闭包创建自己的 plugin 示例 加载 loading

    plugin  插件 什么是 plugin? 实现一个功能,与主应用程序分离,减少主应用程序的大小,高复用,可维护 制作过程中,一定要避免依赖其他的元素,减少 id 等的使用,避免与页面中其他内容冲突 ...

  10. ArcGis安装失败提示“需要Microsoft .NET Framework 3.5 sp1或等效环境”的解决方法

    这个问题一般出现在Win8或者Win10系统上,因为系统默认没有启用该.Net Framework. 下载Microsoft .NET Framework 3.5 sp1安装后再开始安装ArcGis. ...