CSS实现对角边框样式

CSS实现对角框,边角加个边框、四角框

一:线性渐变方式:

鼠标悬停触发显示:hover {
              background: linear-gradient(to left, #043add, #043add) left top no-repeat,
                linear-gradient(to bottom, #043add, #043add) left top no-repeat,
                linear-gradient(to left, #043add, #043add) right bottom no-repeat,
                linear-gradient(to left, #043add, #043add) right bottom no-repeat;
              /*设置大小*/
              background-size: 0.12rem 1rem, 1rem 0.12rem;
            }

  

二:伪类

默认是透明opacity: 0; 鼠标悬停触发显示增加css3过渡效果,显示更平滑
:before {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 20px;
              height: 20px;
              content: "";
              border-left: 2px solid #043add;
              border-bottom: 2px solid #043add;
              transition: all 0.6s ease;
              opacity: 0;
            }

            :after {
              position: absolute;
              top: 0;
              right: 0;
              width: 20px;
              height: 20px;
              content: "";
              border-right: 2px solid #043add;
              border-top: 2px solid #043add;
              transition: all 0.6s ease;
              opacity: 0;
            }

            :hover:before,
            :hover:after {
              opacity: 1;
            }

  

左下——右上对角边框,也可以左上——右下对角、四个角。

自己增改代码。

不懂可以留言!

效果图:

原文地址:https://www.cnblogs.com/chalkbox/p/12704555.html

时间: 2024-10-11 00:33:40

CSS实现对角边框样式的相关文章

css中的边框样式

在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小.边框的特性可以通过边框线,边框的宽度及颜色来呈现. 1,边框线 边框线指的是边框线条的样式,包括实线,虚线,点划线等.其具体的使用如下: border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset  | outset 例:div { width:300px; height:100px; bord

CSS盒模型--边框设置:border: 1px solid red(像素 样式 颜色 ),border-bottom:1px dotted #ccc

盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是border代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dashed

CSS元素、边框、背景样式

一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离,如果两元素都设置了margin属性,浏览器只   对较大值有效. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></

css九种的DIV边框样式

原文:css九种的IV边框样式 源代码下载:http://www.zuidaima.com/share/1550463334894592.htm

[转]CSS如何设置html table表格边框样式

原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示.为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例:table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div

CSS边框样式

边框样式 很多HTML元素都有边框,如img, table, td, div, input等. border-style边框样式,枚举值 border-width边框宽度,长度值 border-color边框颜色,颜色值 可以合并上面三个样式属性border: solid 2px red; 还可以分别控制上下左右边框的样式,如border-top-color样式属性 table元素使用border-collapse:collapse;可以合并单元格边框

css。元素样式、边框样式

1.外边距 margin 缩写形式: margin:上边距 右边距 下边距 左边距 margin:上下边距 左右边距 margin:上边距 左右边距 下边距 2.内边距 padding 缩写形式: padding:上边距 右边距 下边距 左边距 padding:上下边距 左右边距 padding:上边距 左右边距 下边距 3.透明度 opacity:number number值为0.0-1.0之间的小数 边框样式 1.边框线 border-top-style 设置上边框线 border-bott

css盒子模型之边框宽度,边框颜色与边框样式

/* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ width: 400px; /* 设置内容区的高度为400px */ height: 400px; /* 设置内容区的背景色为green */ background-color: blueviolet; /* 设置该盒子模型的下方外边距为10px */ margin: 0px 0px 10px; } /*

【CSS】使用边框和背景

1. 应用边框样式 先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"