定义和用法

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. WPF QuickStart系列之样式和模板(Style and Template)

    在WPF桌面程序中,当我们想构建一个统一的UI表现时(在不同操作系统下,显示效果一致),此时我们就需要使用到WPF中的样式和模板技术.简单来说,如果我们需要简单的给一个Button设置宽,高,Marg ...

  2. 学习设计接口api(转)

    介绍 先说说啥是 Api 吧,以下摘自百度百科: API (Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于 ...

  3. 六款值得推荐的android（安卓）开源框架简介(转)

    1.volley 项目地址 https://github.com/smanikandan14/Volley-demo (1)  JSON,图像等的异步下载: (2)  网络请求的排序(scheduli ...

  4. PHP中include和require（转）

    昨天去面试一个php开发,看到笔试试卷上有这么一道题目: include和require有什么区别? 这个题目可以称得上php开发面试中的必考题目,网上也有各种答案和解释.但是我当时却真的想不起来了. ...

  5. 在Asp.Net MVC中用Ajax回调后台方法

    在Asp.Net MVC中用Ajax回调后台方法基本格式: var operData = ...; //传递的参数(action中定义的) var type = ...; //传递的参数(action ...

  6. Asp.Net MVC中DropDownListFor的用法

    在Asp.Net MVC中可以用DropDownListFor的方式来让用户选择已定列表中的一个数值.用法不复杂,这里简单做一个记录. 首先我们要定义一个 Model ,用户在 DropDownLis ...

  7. java杂记——数组拷贝

    这里介绍两种java提供的数组拷贝方法: (1)Arrays提供的copyOf(T src, T desLength)和copyOfRange(T src, int from, int to) (2) ...

  8. java基本数据类型及相互间的转换

    1.首先复习一下java的基本数据类型,见下图 2.比较他们的字节数 备注:1字节(Byte)=8位(Bit) 3.转换中的知识点 *java中整数类型默认的int类型:小数类型默认的double: ...

  9. struts2框架快速入门小案例

    struts2快速入门: index.jsp------>HelloAction--------->hello.jsp struts2流程 1.导入jar包 struts2的目录结构: a ...

  10. Loadrunner中参数化实战（9）-Unique+Once

    参数化数据30条: 脚本如下,演示登录,投资,退出操作是,打印手机号: 首先验证Vugen中迭代: Unique+Once 设置迭代4次Action 结果如下: