本篇文章主要介绍了CSS3实现内凹圆角的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
圆角,大家一定都会做,border-radius, 内凹圆角如何实现?
可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,就要改遮盖盒子的颜色,或者背景是渐变,改起来更麻烦,或背景是图片等等,就直接不太好改了,这种方法就有局限性。 说白了就是遮盖的那部分不透明以后,自适应性不强。
这里介绍一个用径向渐变实现的内凹圆角,可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。
1. 基本线性渐变
p { height:100px; width:200px; background-image:linear-gradient(90deg,red,blue); } <p>从左到右的红到蓝渐变</p>
2. 加百分比调整渐变范围
p { height:100px; width:200px; background-image:linear-gradient(90deg,red 20%,blue 80%); } <p></p>
3. 浓缩渐变范围,直至重合,形成一个红蓝分隔的两个色块
p { height:100px; width:200px; background-image:linear-gradient(90deg,red 50%,blue 50%); } <p></p>
4. 颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了。
p { height:100px; width:200px; background-image:linear-gradient(90deg,transparent 50%,blue 50%); } <p></p>
5. 同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent。
/* 径向渐变主体 */ .raidal { height:100px; width:100px; background:radial-gradient(transparent 50%,blue 50%); } <p class='raidal'></p>
6. 径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。
应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果
/* 径向渐变主体 */ .raidal1 { height:100px; width:100px; background:radial-gradient(200px at left top,transparent 50%,blue 50%); } <p class='raidal1'></p>
7. 同理四个方向, 调整圆心位置即可
/* 左上 */ .raidal1 { height:100px; width:100px; background:radial-gradient(200px at left top,transparent 50%,blue 50%); } /* 右上 */ .raidal2 { height:100px; width:100px; background:radial-gradient(200px at right top,transparent 50%,blue 50%); } /* 右下 */ .raidal3 { height:100px; width:100px; background:radial-gradient(200px at right bottom,transparent 50%,blue 50%); } /* 左下 */ .raidal4 { height:100px; width:100px; background:radial-gradient(200px at left bottom,transparent 50%,blue 50%); } <p class='raidal1'></p> <p class='raidal2'></p> <p class='raidal3'></p> <p class='raidal4'></p>
8. 同样,不想这么圆角,也是可以椭圆的,半径设两个参数, 就是椭圆。
/* 左上 */ .ellipse { height:100px; width:100px; background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%); } <p class='ellipse'></p>
径向渐变有很多参数大家可以自己再尝试调整,可以出现各种奇怪的形状,这里就不演示了。相对来说,内凹圆角就够用了
Atas ialah kandungan terperinci 代码展示:利用CSS3实现内凹圆角. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Dreamweaver CS6
Alat pembangunan web visual

mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
