定义和用法

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. 使用html5的离线缓存技术

    突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...

  2. 注解：【有连接表的】Hibernate单向1->N关联

    Person与Address关联:单向1->N,[有连接表的] Person.java package org.crazyit.app.domain; import java.util.Hash ...

  3. java导出word的6种方式（复制来的文章）

    来自: http://www.cnblogs.com/lcngu/p/5247179.html 最近做的项目,需要将一些信息导出到word中.在网上找了好多解决方案,现在将这几天的总结分享一下. 目前 ...

  4. Streaming data from Oracle using Oracle GoldenGate and Kafka Connect

    This is a guest blog from Robin Moffatt. Robin Moffatt is Head of R&D (Europe) at Rittman Mead, ...

  5. 【微信Java开发 --1】内网穿透外网，使用外网域名可以访问到本地项目

    1.首先上https://natapp.cn/ 2.接下来在网站申请账号 3.购买免费隧道 4.为你的免费隧道设置名称以及端口号,由于本人本地的使用Tomcat做服务器,所以用惯了8080端口,因此设 ...

  6. 定时备份mysql

    @echo offset filename=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%mysqldump -- ...

  7. phpstorm的安装、破解、和汉化

    1.去官网下载最新版安装. 2.完成选择购买软件,下面选择中间那个账户方法License server,把这条链接复制下去:http://idea.qinxi1992.cn 3.下载汉化包resour ...

  8. Linux上部署JProbe

    1.在本机PC上安装JProbe: JProbeforWindowsEXEFormat_810

  9. 快速幂 fast_exp

    long long fast_exp(int base,long long exp,int mod) { long long ans=1LL,a=base; ) { if(exp&1LL) a ...

  10. CSS3_实现圆角效果box-shadow

    1.outline的直角与圆角 来给个div: <div class="use-outline"></div> 来再给个样式: .use-outline{ ...