Effect principle Mainly use CSS gradient to achieve some background hollowing that does not require cutting Coupon Style .mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) { width: @width; height: @height; background: radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 51% no-repeat, radial-gradient(circle at bottom right, transparent @r, @lcolor 0) -(@width - @left) bottom ~'/' 100% 51% no-repeat, radial-gradient(circle at top left, transparent @r, @rcolor 0) @left 0 ~'/' 100% 51% no-repeat, radial-gradient(circle at bottom left, transparent @r, @rcolor 0) @left bottom ~'/' 100% 51% no-repeat; } .mixinsTicket1(@width, @height, @r, @top, @color) { width: @width; height: @height; background: radial-gradient(circle at bottom left, transparent @r, @color 0) left (@top - @height) ~'/' 51% 100% no-repeat, radial-gradient(circle at top left, transparent @r, @color 0) left @top ~'/' 51% 100% no-repeat, radial-gradient(circle at bottom right, transparent @r, @color 0) right (@top - @height) ~'/' 51% 100% no-repeat, radial-gradient(circle at top right, transparent @r, @color 0) right @top ~'/' 51% 100% no-repeat; &::after{ content: ''; display: block; position: absolute; width: calc(100% - 2 * @r); left: @r; top: @top; border-top: 1px dashed #fff; transform: translateY(.5); } } Cutaway effect ps: The sawtooth is related to the display of the device .mixinFlag(@width, @height, @bg) when(default()) { width: @width; height: @height; background: linear-gradient(45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) right, linear-gradient(-45deg, transparent sqrt(pow(@width/2, 2)/2), @bg 0) left; background-size: 50% 100%; background-repeat: no-repeat; } .mixinFlag(@width, @height, @bg) when(@width > @height) { width: @width; height: @height; background: linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left, linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left; background-size: 100% 50%; background-repeat: no-repeat; } .mixinsMark(@width, @height, @bg) { width: @width; height: @height; background: linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) bottom left, linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) top left; background-size: 100% 50%; background-repeat: no-repeat; } ps: The above effects can be achieved in four directions. The codes for other directions are not posted, but the principles are the same Plaid css { width: 510px; height: 128px; background: #FFF; background-image: linear-gradient(rgba(182, 128, 102, .8) 8px, transparent 0), linear-gradient(90deg, rgba(182, 128, 102, .8) 8px, transparent 0); background-size: 8px 14px, 14px 8px; } focus .mask { position: fixed; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background: radial-gradient(closest-side at 50% 278rpx, transparent 140rpx, rgba(0, 0, 0, .12) 180rpx, rgba(0, 0, 0, .22) 200rpx, rgba(0,0,0,.3) 220rpx, rgba(0,0,0, .4)) no-repeat; } Summarize Each gradient layer can be treated as a background image, which means that each gradient layer can specify its position, size, and repeat. Students who have used PS should know the concept of layers. The principle of our background layer stacking is similar (of course, gradients can also be used as background images). By controlling the size of the gradient, where it needs to be hollowed out, where it needs to be displayed, and whether it is tiled, you can achieve the basic effects in most scenes. Of course, a cut picture is faster, but sometimes a cut picture cannot adapt to all scenes. Mastering the order in which background is written can help you conceive the effect you want in your mind: Copy code The code is as follows: background: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: About Nginx gzip configuration
>>: Example tutorial on using the sum function in MySQL
1. Compile proto Create a new proto folder under ...
1.1 General marking A general tag consists of an ...
For what I am going to write today, the program r...
1. Use Canvas images as CSS background images The...
1. Introduction This article does not have screen...
When using the MySQL database, if you have not lo...
Table of contents Table/index.js Table/model/inde...
Table of contents 1. Overview 2. gdb debugging 2....
The role of init_connect init_connect is usually ...
JS implements a hover drop-down menu. This is a s...
Table of contents Preface How to use Summarize Pr...
Table of contents Take todolist as an example The...
Preface 1. Benchmarking is a type of performance ...
Common scenarios for Nginx forwarding socket port...
When configuring web.xml for tomcat, servlet is a...