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
Duplicate form submission is the most common and ...
What is ssh Administrators can log in remotely to...
Table of contents 1. Picture above 2. User does n...
Encapsulate el-dialog as a component When we use ...
Preface In our daily development process, sorting...
Table of contents Introduction Public code (backe...
Table of contents TOKEN Timer Refresher 2. Intern...
Mini Program Custom Scroll-View Scroll Bar Withou...
The content attribute is generally used in the ::...
The input box always displays the input history wh...
#docker ps check, all ports are mapped CONTAINER ...
1. Package the Java project into a jar package He...
Preface: I recently started to study the construc...
Table of contents First, configure package.json T...
Zen Coding It is a text editor plugin. In a text ...