首页 > 其他分享 >【CSS】实现 渐变色+圆角 border

【CSS】实现 渐变色+圆角 border

时间:2022-11-25 18:23:53浏览次数:36  
标签:005bae1a 渐变色 4F89CB4D 5px rem 0px border CSS

.charcard {
        position: relative;
	box-shadow: -5px 0px 32px 2px #005bae1a inset, 0px -5px 32px 2px #005bae1a inset, 5px 0px 32px 2px #005bae1a inset, 0px 5px 32px 2px #005bae1a inset;
	border: 0.2rem solid #4F89CB4D;
	border-right-color: #4F89CB4D;
	border-left-color: #4F89CB4D;
	border-image: linear-gradient(85deg, #4F89CB4D, #0363b5CC 25%, #4F89CB4D) 2 2 2 2;
	box-sizing: border-box;
	background-color: rgb(7 18 43);
        margin: 0.8rem;
}
.charcard::after {
    content: '';
    display: block;
    border: 0.3rem solid #0e162d;
    border-radius: 0.8rem;
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
}

.charcard-content * {
    z-index: 1;
}   

  

 

  

 

标签:005bae1a,渐变色,4F89CB4D,5px,rem,0px,border,CSS
From: https://www.cnblogs.com/abby-lrwei/p/16925997.html

相关文章

  • 一、css简介
    网页分成三部分结构(html)表现(css)行为(javascript)css​ -层叠样式表​ -网页实际上是一个多层的结构通过css可以分别为网页的每一层来设置样式,而最终我们能看到只是......
  • 二、css语法
    style标签css中的注释/*这是注释*/css的基本语法:选择器声明块选择器,通过选择器可以选中页面中的指定元素,比如p的作用就是选中页面中的所有的p元素​ 声明块,通过......
  • 一些有用的CSS样式
    /*1.垂直对齐容器中的元素*/.verticalcenter{  position:relative;  top:50%;  -webkit-transform:translateY(-50%);  -......
  • CSS 基础属性篇组成及作用
    ####学习目标-css属性和属性值的定义-css文本属性-css列表属性-css背景属性-css边框属性-css浮动属性#####一、css属性和属性值的定义>属性:属性是指定选择符所具有......
  • 012:前端学习-CSS动画
    CSS动画动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%0%......
  • 网安——CSS
    一、CSS基础概念CSS有两个重要的概念,分为样式和布局CSS的样式分为两种,一种是文字的样式,一种是盒模型的样式CSS的另一个重要的特质就是辅助页面布局,完成HTML不能完成的功......
  • css3父元素模糊不影响子元素
    说一下css3父元素模糊不影响子元素的效果。在使用css3的filter属性设置背景模糊的时候,我们通常想到的做法是写如下的代码:<!DOCTYPEhtml><html><head><metacharset="ut......
  • css的选择器
    /*class选择器*/.s1{width:100;a:linkimg{filter:gray;}a:hoverimg{filter:"";}}/*id选择器的使用*/#id1{background-color:g......
  • 利用级联式样式表CSS显示XML文档
    实验环境:xmlspy2013firefox;一、问题  1.1问题一:1.对于下列XML文档,根据要求编写在XML文档上对应的CSS样式表。<?xmlversion="1.0"?><PRODUCTDATA><PRODUCTPRODID=......
  • HTML5+css3新增布局元素整理
    HTML5新增的语义化标签<head>:头部标签<nav>:导航标签<article>:内容标签<section>:定义文档某个区域<aside>:侧边栏标签<footer>:尾部标签 注意:这种语义化标准主要是针对搜索引......