定义和用法

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. 最长公共子序列（LCS）和最长递增子序列（LIS）的求解

    一.最长公共子序列 经典的动态规划问题,大概的陈述如下: 给定两个序列a1,a2,a3,a4,a5,a6......和b1,b2,b3,b4,b5,b6.......,要求这样的序列使得c同时是这两个 ...

  2. 1080P、720P、4CIF、CIF所需要的理论带宽

    转自:http://blog.sina.com.cn/s/blog_64684bf30101hdl7.html 在视频监控系统中,对存储空间容量的大小需求是与画面质量的高低.及视频线路等都有很大关系. ...

  3. RTP、RTCP及媒体流同步

    转自:http://blog.163.com/liu_nongfu/blog/static/19079414220139169225333/ 一.流媒体简介 流媒体是指在internet中使用流媒体技 ...

  4. ok6410按键中断编程,linux按键裸机

    6410按键中断编程 一.流程分析 外部中断控制寄存器(s3c6410x  359页) 1.EINTxCONy: 外部中断组x的第y个控制器.这个就是设置中断的触发方式.有5种触发方式. 2.EINT ...

  5. Dwz下拉菜单的二级联动

    在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref. ref 属 ...

  6. 基于MATLAB的adaboost级联形式的人脸检测实现

    很早之前就做过一些关于人脸检测和目标检测的课题,一直都没有好好总结出来,趁着这个机会,写个总结,希望所写的内容能给研究同类问题的博友一些见解和启发!!博客里面涉及的公式太繁琐了,直接截图了. 转载请注 ...

  7. javascript settimeout and setinterval

    setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束.如果运行的代码中再次运行同样的setTimeout命令,则可循环运行.setinterval是循环运行的,即每 ...

  8. Java学习笔记（四）——流程控制语句

    一.条件语句 1.if条件语句 (1)语法: if(条件) { 条件成立时的代码 } (2)执行过程 2.if else语句 if(条件) { 条件成立时的代码 } else { 不成立的代码 } 3 ...

  9. SQL单表查询案例

    表(emp)结构 (1)查询部门编号为10中所有经理,部门编号为20中所有销售员,还有即不是经理又不是销售员但其工资大或等于20000的所有员工详细资料. SELECT * FROM emp ; (2 ...

  10. SQL Case when 的使用方法（转）

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...