定义和用法

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. [v9] 列表页 调用 正文内容 或 自定义 字段（moreinfo的调用方法）

    "才能使用的字段) id content readpoint groupids_view paginationtype maxcharperpage template paytype all ...

  2. python生成RSS（PyRSS2Gen）

    既然能够用python解析rss,那么也顺带研究下生成rss. 其实很简单,只是生成一个比较特殊点的xml文档而已. 这里我使用了PyRss2Gen,用法很简单,看代码就知道了,如下: import ...

  3. gnuplot安装问题(set terminal "unknown")

    今天在系统同上要装个gnuplot,原来用的都是拷好的虚拟机.这也是第一次装.本来以为分分钟的事,却不料遇到不少麻烦.记录一下,供大家参考 一,快速开始安装 ubuntu下那自然是: sudo apt ...

  4. Windows phone 8.0 本地化遇到的两个问题

    基本上来说,按照msdn来讲的,本地化和全球化没有太多的问题,链接如下: http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/ff ...

  5. 同一个项目，项目名称不一致，这两个项目同时在Eclipse中出现

    在Eclispse中,实际同一个项目,项目名称不一致,这两个项目同时在Eclipse中出现. ①打开项目文件夹,找到“.cproject”文件 ② 在<name>节点重命名 ③ 导入Ecl ...

  6. loadrunner中切割strtok字符串

    http://blog.sina.com.cn/s/blog_7ee076050102vamg.html http://www.cnblogs.com/lixiaohui-ambition/archi ...

  7. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...

  8. UVA 11475 后缀数组/KMP

    题目链接: 题意:给定一个只含字母的字符串,求在字符串末尾添加尽量少的字符使得字符串为回文串. 思路:因为只能从末尾添加字符,所以其实求的是最长的后缀回文串.那么添加的字符为除了这个原串的最长后缀回文 ...

  9. BZOJ 1901 Zju2112 Dynamic Rankings ——整体二分

    [题目分析] 上次用树状数组套主席树做的,这次用整体二分去水. 把所有的查询的结果一起进行二分,思路很好. [代码] #include <cstdio> #include <cstr ...

  10. codeforces 519E A and B and Lecture Rooms LCA倍增

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Status Prac ...