将边界半径应用于内部图像
Applying border radius to image inside
我正在尝试将 border-radius 添加到滑块的左侧（与右侧完全一样）。
我尝试为元素提供相对位置和 z 索引，但无法正常工作。
如有任何帮助，我们将不胜感激。
PS。在整页中打开代码段。
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
边框半径应用于包含图像的 div。也尝试将其应用于图像本身。目前您正在将半径应用到 div 但它被图像覆盖了。如果您暂时删除图像，您会看到这一点，因为它会在其后面的 div 上显示圆角。
试试这个：
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;border-radius: 20px 0 0 20px">
</div>
唯一的变化是我在图像样式标签中添加了 'border-radius: 20px 0 0 20px'。这适用于：
- 20px 四舍五入为 top-left
- 0px 四舍五入到 top-right
- 0px 四舍五入到 bottom-right
- 20px 四舍五入为 bottom-left
只需使用 overflow: hidden; 和 border radius
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px; overflow:hidden;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我正在尝试将 border-radius 添加到滑块的左侧（与右侧完全一样）。
我尝试为元素提供相对位置和 z 索引，但无法正常工作。
如有任何帮助，我们将不胜感激。
PS。在整页中打开代码段。
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
边框半径应用于包含图像的 div。也尝试将其应用于图像本身。目前您正在将半径应用到 div 但它被图像覆盖了。如果您暂时删除图像，您会看到这一点，因为它会在其后面的 div 上显示圆角。
试试这个：
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;border-radius: 20px 0 0 20px">
</div>
唯一的变化是我在图像样式标签中添加了 'border-radius: 20px 0 0 20px'。这适用于：
- 20px 四舍五入为 top-left
- 0px 四舍五入到 top-right
- 0px 四舍五入到 bottom-right
- 20px 四舍五入为 bottom-left
只需使用 overflow: hidden; 和 border radius
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="modalx1" class="container-fluid" style="padding:60px 0 60px 0;scroll-margin:19px">
<div class="container" style="padding:0px 0 0px 0;">
<div class="row" style="background-color:transparent">
<div class="col-12">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div style="padding:-40px;box-shadow: 0 0 20px 20px rgb(0 0 0 / 15%);border-radius:20px; overflow:hidden;">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pt-0 order-2 content" data-aos="fade-left" data-aos-delay="100" style="margin:auto!important;padding:0!important;text-align: center;">
<h3 style="font-size:30px!important;font-weight: bolder;margin-bottom:20px!important">Hiho
</h3>
<span > Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
<p class="font500s" style="font-size:.85rem">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>
<div class="col-md-6 order-1 pt-4" data-aos="fade-right" data-aos-delay="100" style="position:relative;z-index:9;margin:auto!important;padding:0!important">
<img src="https://www.shaadidukaan.com/vogue/wp-content/uploads/2019/08/hug-kiss-images.jpg" style="position:relative;z-index:10;width: 100%;">
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>