定义和用法

clip 属性剪裁绝对定位元素。

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

描述

设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)。

浏览器支持

所有主流浏览器都支持 clip 属性。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{margin:0;padding:0;}

    .box{width:300px;height:300px;border:1px solid #ccc;margin:100px;position:relative;}

    .circle{width:16px;height:16px;border:1px solid #ccc;background:#fff;position:absolute;top:29px;z-index:1;border-radius:50%;}

    .circle_left{left:-8px;clip:rect(0, auto, auto, 7px);}

    .circle_right{right:-8px;clip:rect(0, 11px, auto, auto);}

    </style>

</head>

<body>

    <div class="box">

        <em class="circle circle_left"></em>

        <em class="circle circle_right"></em>

    </div>

</body>

</html>

用clip剪裁实现半圆的更多相关文章

  1. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  2. 背水一战 Windows 10 (71) - 控件（控件基类）: UIElement - RenderTransform（2D变换）, Clip（剪裁）

    [源码下载] 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁) 作者:webabcd 介绍背水一 ...

  3. css3画半圆的两种方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  4. 重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding

    原文:重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding [源码下 ...

  5. 【Flutter】容器类组件之剪裁

    前言 Flutter中提供了一些剪裁函数,用于对组件进行剪裁. 剪裁Widget 作用 ClipOval 子组件为正方形时剪裁为内贴圆形,为矩形时,剪裁为内贴椭圆 ClipRRect 将子组件剪裁为圆 ...

  6. CSS 基础篇、绝对有你想要

    本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 > ...

  7. CSS3-01 简介

    概述 HTML 文档由包含 HTML 标签的 HTML 元素组成,HTML 标签被用于定义文档的内容.HTML 文档内容没有额外的样式,以纯文本流的方式渲染到浏览器页面.需要借助层叠样式表(CSS)来 ...

  8. python css基本操作

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  9. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

随机推荐

  1. unity3D与网页的交互---做项目的一点总结

    (来自博客园) 由于项目需要,要求用unity来展示三维场景,并在三维中能够方便的查询数据库等.一开始尝试在unity中直接连接数据库,当时连的xml,然而每次发布成网页后都会出现路径找不到等问题,所 ...

  2. HDU 5900 QSC and Master 区间DP

    QSC and Master Problem Description   Every school has some legends, Northeastern University is the s ...

  3. bzoj1691[Usaco2007 Dec]挑剔的美食家 平衡树treap

    Description 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一去不返了.现在,Farmer John不得不去牧草专供商那里 ...

  4. ios 时间和毫秒数转换

    01-时间和毫秒数的相互转换 //获取毫秒数的时间戳 long inter = [[NSDate date] timeIntervalSince1970]*1000; NSLog(@"%ld ...

  5. 【项目经验】——JSON.parse() && JSON.stringify()

    我们在做项目的时候,都知道序列化和反序列化,师哥说:"有正就有反,有来就有回!"的确,就是这样.然后我们在这里分享一下JSON.stringify()  和JSON.parse() ...

  6. jsp网站环境搭建

    工具:tomcat7(exe安装版).jre7.javaxcms(安装版.非源码).mysql 1.先安装jre7,或者安装java7(自带了jre7) 2.安装tomcat7,期间要选择jre7安装 ...

  7. BestCoder Round #83

    第一次做BC呀,本来以为会报零的,做了56分钟A了第一题 然后就没有然后了. 贴一下第一次A的代码. /* 0.组合数 1. 2016-05-14 19:56:49 */ #include <i ...

  8. mac OS X操作 -- 常用

    显示/隐藏默认隐藏文件:defaults write com.apple.finder AppleShowAllFiles -bool true/false 重置ROOT密码: http://www. ...

  9. 关于最近Google无法正常访问的变通之法(已经被墙)

    对于习惯使用谷歌搜素的骚年最近可能比较蛋疼,没这方面需求的就另当别论.可能是政府限制加强的原因,有时访问谷歌在香港服务器也不大好使,不过最近发现,不通过谷歌域名而直接使用谷歌的ip来访问谷歌响应速度可 ...

  10. ASP.NET MVC3 中整合 NHibernate3.3、Spring.NET2.0 使用AOP执行事务处理

    方法1 <object id="ServiceOperation" type="Spring.Aop.Support.SdkRegularExpressionMet ...