首页 > 其他分享 >css: rainbow Border with gradient and radius

css: rainbow Border with gradient and radius

时间:2024-01-05 21:13:41浏览次数:40  
标签:rainbow gradient 3pdwg6wqe1jpcgh fonts url radius webfont font

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css rainbow Border with gradient and radius </title>
	<meta content="涂聚文,Geovin Du,塗聚文,geovindu,捷为工作室" name="keywords">
<meta content="涂聚文,Geovin Du,塗聚文,geovindu,捷为工作室" name="description">
	<meta http-equiv="X-UA-Compatible" content="chrome =1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" type="image/gif" />
<meta name="author" content="Geovin Du 涂聚文,塗聚文,geovindu">	
<style type="text/css">
@charset "UTF-8";
@font-face{
		font-family:"minizhuanshu";
			src:url("webfont/fonts/3pdwg6wqe1jpcgh.eot");/*IE 9 Compat Modes*/
			src:local("迷你繁篆书"),
			url("webfont/fonts/3pdwg6wqe1jpcgh.eot?#iefix") format("embedded-opentype"),/*IE6-IE8 加载不成功*/
			/*src: local('minizhuanshu'), 
			local('minizhuanshu'),*/       
				url("webfont/fonts/3pdwg6wqe1jpcgh.woff2") format("woff2"),
				url("webfont/fonts/3pdwg6wqe1jpcgh.otf") format("opentype"),
				url("webfont/fonts/3pdwg6wqe1jpcgh.woff") format("woff"),/*Modern Browsers*/
				url("webfont/fonts/3pdwg6wqe1jpcgh.ttf") format("truetype"),/*Safari,Android,iOS */
				url("webfont/fonts/3pdwg6wqe1jpcgh.svg#minizhuanshu") format("svg");/*Legacy iOS */
		font-weight:normal;
		font-style:normal;/*字体样式*/
		font-display: swap; /* 先匹配到的已经能够使用的字体,字体成功载入后切换字体*/
	    text-rendering: optimizeLegibility; /*CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。*/
}	
	
	
.gradient-box {
  font-family: "minizhuanshu";
  font-size: 18px;
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  max-width: 22em;
  position: relative;
  padding: 30% 2em;
  box-sizing: border-box;
  color: #FFF;
  background: #000;
  background-clip: padding-box;
  /* !importanté */
  border: solid 5px transparent;
  /* !importanté */
  border-radius: 1em;
}
.gradient-box:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -5px;
  /* !importanté */
  border-radius: inherit;
  /* !importanté */
  background:linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%); /*linear-gradient(to right, red, orange);*/
}
 
html {
  height: 100%;
  background: #000;
  display: flex;
}
 
body {
  margin: auto;
}
</style>
 
</head>
 
<body>
  <div class="gradient-box">
   
<p>在其一般意义上,政府正义,即政府对社会公共事务进行管理的一种合理状态,意味着政府不妨碍且促进权利和义务、资源与利益在社会成员之间的适当安排和合理分配。在其法哲学层面,政府正义的核心命题是“如何通过一个‘善’的政治过程及制度建设实现整个社会的正义或者一个正义的社会”在这个意义上,政府正义包含了两层含义:一是政府本身应当是正义的一包括政府的产生和运行过程都应当合乎正义原理;二是政府是应当为实现正义而存在的--社会正义的实现,是需要政府这个存在的,而政府存在的根本价值,正在于实现社会正义。

       --法治政府要论丛书 《法治政府要论--基本原理》江国华 着  武汉大学出版社  2020年12月
</p>
 
</div>
</body>
</html>

  

 

标签:rainbow,gradient,3pdwg6wqe1jpcgh,fonts,url,radius,webfont,font
From: https://www.cnblogs.com/geovindu/p/17948070

相关文章

  • 思科wlc使用windows radius 认证配置
    原贴https://www.cnblogs.com/sanjiu/p/14131980.html思科wlc使用windowsradius认证配置  目录一      需求介绍:...2二      实验环境:...2三      windows环境安装...33.1     第一步,安装windows环境。...33.2     第......
  • Web网页端IM产品RainbowChat-Web的v6.0版已发布
    一、关于RainbowChat-WebRainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIMSDK (Github地址) 的产品级移动端IM系统)。► 详细介绍:http://www.52im.net/thread-2483-1-1.html► 版本记录:http://www.52im.net/th......
  • LinearGradientBrush
    渐变方向 默认是左上角到右下角从左到右<BorderHeight="35"Width="120"><Border.Background><LinearGradientBrushEndPoint="1,0"><GradientStopColor="Yellow"Offset="0......
  • Matlab中gradient函数 梯度计算原理
    ​Gradient(F)函数求的是数值上的梯度,假设F为矩阵.Gradient算法>>x=[6,9,3,4,0;5,4,1,2,5;6,7,7,8,0;7,8,9,10,0]x=6934054125677807891......
  • 神经网络入门篇:神经网络的梯度下降(Gradient descent for neural networks)
    神经网络的梯度下降在这篇博客中,讲的是实现反向传播或者说梯度下降算法的方程组单隐层神经网络会有\(W^{[1]}\),\(b^{[1]}\),\(W^{[2]}\),\(b^{[2]}\)这些参数,还有个\(n_x\)表示输入特征的个数,\(n^{[1]}\)表示隐藏单元个数,\(n^{[2]}\)表示输出单元个数。在这个例子中,只介绍过的......
  • 软件测试|好用的pycharm插件推荐(三)——Rainbow Brackets
    简介我们平时写代码的时候,括号是让我们非常头疼的地方,特别是代码逻辑很多,层层嵌套的情况。一眼很难看出,代码是从哪个括号开始,到哪个反括号结束的。这个时候要是有一款工具能够让我们一眼就看出代码从哪个括号开始,到哪个反括号结束,无疑对我们会有很大帮助。PyCharmRainbowBra......
  • 软件测试|好用的pycharm插件推荐(一)——Indent Rainbow
    简介在Python中,缩进至关重要,缩进关系着我们的代码层级和逻辑的实现,一旦缩进错误,整个代码的运行就会报错,但是对于初学者来说,又不太容易注意到这一点,所以要是能够有一款提示代码缩进的插件能够使用的话,对我们是很有帮助的。PyCharm作为一款功能强大的Python集成开发环境(IDE),提供了......
  • Approximation with Gradient Descent Method
    title:ApproximationwithGradientDescentMethodlayout:pagecategories:dataanalysisPolynomialApproximationwithGradientDescentMethodSupposewehavethefollowingdatasethw10datal.txtwhichisshowninFigure1.1.Figure1.1Plotoftrainin......
  • freeradius对接ldap配置
    1、安装freeradiusyuminstallfreeradiusfreeradius-utilsfreeradius-ldapfreeradius-krb5 2、启用LDAP模块ln-s/etc/raddb/mods-available/ldap/etc/raddb/mods-enabled/ 3、配置radius客户端,修改/etc/raddb/clients.confclientmbp{ ipaddr =192.168.......
  • OC CAGradientLayer 渐变色
       @property(nonatomic,strong)NSTimer*timer;/**<定时器*/@property(strong,nonatomic)CAGradientLayer*gradientLayer;/**<渐变层*/[self.layerinsertSublayer:self.gradientLayeratIndex:0];//初始化定时器self.timer=[NSTi......