定义和用法

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. Uncaught ReferenceError: console is not defined

    今天写javascript代码遇到了这个极其神奇的问题,居然报错说内置的console不存在,而且后来我换成了alert也不行.照例说这些都是js代码内置的东西不应该出现这种错误.不过百度之发现貌似没 ...

  2. Matlab tips and tricks

    matlab tips and tricks and ... page overview: I created this page as a vectorization helper but it g ...

  3. JQuery Event属性说明

    JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是有作用的. 如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的地方 ...

  4. Android系统架构

    Linux内核层 为Android的各种设备提供了底层驱动 系统运行库层 为Android提供一些底层的库,如数据库.3D绘图等 应用框架层 核心API 应用层 具体的手机application An ...

  5. 通信原理实践（三）——FM调制

    一.FM调制 1.代码如下: clc,clear; fm = ; % 调制信号频率(Hz) Am = 0.5; % 调制信号幅度 fc = 5e3; % 载波频率(Hz) Ac = ; % 载波幅度 ...

  6. JAVA Day6

    1.对象:用来描述客观事物的一个实体,由一组属性和方法组成 2.属性--对象具有的各种特征    *每个对象的每个属性都拥有特定值    *例如:张浩和李明的年龄.姓名不一样 3.方法--对象执行的操 ...

  7. [技术学习]js正则表达式汇总

    一.常用正则表达式关键字 ".":任意字符 "*":任意个数 "+":任意个数,至少一个 "?":0-1个 " ...

  8. 餐厅系统app7

    团队贡献分 杨子健:23 郭志豪:24 谭宇森:22 刘森松:31

  9. Android 自动化测试—robotium(八) 拖拽

    本文来源于:http://xiaomaozi.blog.51cto.com/925779/933056 SeekBar控件 代码实现:http://luwenjie.blog.51cto.com/92 ...

  10. Lc.exe已退出,代码为-1

    编译项目,出现提示"Lc.exe已退出,代码为-1" .   解决办法: 意思就是把licenses.licx这个文件里的内容删除,但是文件还在(此时是个空文件),发生这个问题的原 ...