css 矩形切角,特殊border的样式 -- CSS3实现三种切角效果

效果一：

代码：

corner cutcorner cutcorner cutcorner cut

CSS：

.cornerCut{

width:200px;

margin: 10px 20px;

height: 200px;

background:#58a;

color:#fff;

text-align: center;

font-size:10px;

background:linear-gradient(45deg,transparent 15px, #58a 0);

}

效果二：

代码：

CSS：

.cornerCut2{

width:200px;

margin: 10px 20px;

height: 200px;

background:#58a;

background:linear-gradient(-45deg,transparent 15px, #58a 0) bottom right,

linear-gradient(45deg,transparent 15px, #58a 0) bottom left,

linear-gradient(135deg,transparent 15px, #58a 0) top left,

linear-gradient(-135deg,transparent 15px,#58a 0) top right;

background-size: 50% 50%;

background-repeat: no-repeat;

}

效果三：

代码：

CSS：

.cornerArc{

width:200px;

margin: 10px 20px;

height: 200px;

background:#58a;

background:radial-gradient(circle at top left,transparent 15px,#58a 0) top left,

radial-gradient(circle at top right,transparent 15px,#58a 0) top right,

radial-gradient(circle at bottom right,transparent 15px,#58a 0) bottom right,

radial-gradient(circle at bottom left,transparent 15px,#58a 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

}

css 矩形切角,特殊border的样式 -- CSS3实现三种切角效果相关推荐

引入CSS样式表的三种方式
引入CSS样式表的三种方式行内样式通过标签的style属性来设置元素的样式,其基本语法格式如下: <h1 style="color:red;">style属性的应用 ...
html中样式表的三种形式,CSS样式表有几种存在方式
外部样式:将网页链接到外部样式表. 内页样式:在网页上创建嵌入的样式表. 行内标签样式:应用内嵌样式到各个网页元素标签内. 每一种方法均有其优缺点: 当要在站点上所有或部份的网页上一致地应用相同样式时 ...
在html中样式表的三种类型,css样式有哪几种类型？
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.下面本篇文章就来给大家介绍一下CSS样式的类型,希望对大家有所帮助. 内联式样式内联式 ...
html中引入css样式表的三种方式,css引用的几种方式是什么？
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式在HTML标签中,使用style属性设置C ...
CSS入门-创建CSS样式表的三种方式
一.三种方式创建 CSS 样式表有三种方式: 1. 元素内嵌样式: 2. 文档内嵌样式3. 外部引入样式. 元素内嵌样式: 即在当前元素使用 style 属性的声明方式,"这是一段文本&q ...
v html如何添加样式,详解三种方式解决vue中v-html元素中标签样式
Vue为v-html中标签添加CSS样式 {{news.title}} {{news.datetime}} 返回列表当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果, .con{ ...
三维坐标系带偏航角俯仰角_浅谈三维旋转的三种方法及差异
概述在3D图形学中,几何变换大致分为三种:平移变换(Translation).缩放变换(Scaling).旋转变换(Rotation),而其中又以旋转变换(Rotation)最为复杂,通常旋转变换( ...
前端必备 PS三种切图方法 Cutterman最好用的切图工具
文章目录 1.常见的图片格式方法1. PS图层切图方法2. 切片切图方法3.Cutterman插件切图(最简单.最好用的切图工具) 准备工作:一个非绿色版的PS软件,如果还没安装好PS的,建议在 ...
css3切角文本框_CSS3样式linear-gradient的使用（切角效果）
缺角效果先看效果图这是内容 .div1 { width: 100px; height: 40px; line-height: 40px; background:linear-gradient(-1 ...

css 矩形切角,特殊border的样式 -- CSS3实现三种切角效果

css 矩形切角,特殊border的样式 -- CSS3实现三种切角效果相关推荐

最新文章

热门文章