CSS实现一些小功能

前端小木

已于 2023-11-30 14:12:09 修改

阅读量643

点赞数 7

分类专栏： HTML、CSS 文章标签： css css3 前端

于 2023-11-29 23:19:46 首次发布

本文链接：https://blog.csdn.net/liaoxuewu/article/details/134701532

版权

HTML、CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.信封边框的实现

1.1 使用背景渐变

<!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>
  <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>
  <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>