CSS实现一些小功能

1.信封边框的实现

1.1 使用背景渐变

DOCTYPE html>html>
 head>
  meta charset="UTF-8">
  title>title>
  style type="text/css">
   .uu {
      wi服务器托管网dth: 200px;
      height: 70px;
      padding:1em;
      border: 1em solid transparent;
      background: linear-gradient(white,white)         padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; 
   }
  style>
 head>
 body>
  div class="uu">div>
 body>
html>

1.2 使用边框图片

DOCTYPE html>html>
 head>
  meta charset="UTF-8">
  title>title>
  style type="text/css">
   .uu {
       width: 200px;
       height: 70px;
       padding: 1em;
       border: 1em solid transparent;
       background:linear-gradient(white,white)          padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
   }
  style>
 head>
 body&服务器托管网gt;
  div class="uu">div>
 body>
html>

2.内凹圆角(优惠券)

2.1 使用伪类

div class="main">div>
style>
.main {
  position: relative;
  width: 200px;
  height: 40px;
  margin: 0 5px;
  background: -webkit-linear-gradient(left, #F6327C, #DF3DF0);
  background: linear-gradient(to right, #F6327C, #DF3DF0);
}
.main::before {
  position: absolute;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -5px;
  width: 5px;
  height: 40px;
  border-radius: 2px 0 0 2px;
  background:-webkit-radial-gradient(10px at left,transparent 50%,#F6327C 50%);
  background: radial-gradient(10px at left,transparent 50%,#F6327C 50%);
}
.main::after {
  position: absolute;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -5px;
  width: 5px;
  height: 40px;
  border-radius: 0 2px 2px 0;
  background: -webkit-radial-gradient(10px at right,transparent 50%,#F6327C 50%);
  background: radial-gradient(10px at right,transparent 50%,#F6327C 50%);
}
style>

3.邮件虚线

style>
.uni-grid-item-index {
	position: relative;
	overflow: hidden;
	border-top: 3rpx solid transparent;
	background: linear-gradient(white, white) padding-box,
		repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
	margin-bottom: 10rpx;
	flex: 0 0 32%;
}
style>

4.右上角三角形

style>
.uni-detail-right-content {
	width: 70%;
	background: #fff;
	border-radius: 5rpx;
	border: 1px solid #c4c6cb;
	margin: 10rpx 0 0 10rpx;
	font-size: 12rpx;
	position: relative;
	overflow: hidden;
}
.right-content-icon {
	background: red;
	color: white;
	width: 4.5rem;
	height: 4rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 1.1;
	text-align: center;
	position: absolute;
	top: -30rpx;
	right: -35rpx;
	transform: rotate(45deg);
}

style>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Linux 中常用的基础命令

by emanjusaka from https://www.emanjusaka.top/2024/01/linux-base-command 彼岸花开可奈何 本文欢迎分享与聚合，全文服务器托管网转载请留下原文地址。 分类总结了 Linux 中的基础命令，可…