正常应该是
在ipad1上如果div设置了position: relative;或span上设置了-webkit-transform是这样
ipad4上touchmove里面span的时候也是圆角部分隐藏不了
贴上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
-webkit-user-select: none;
}
body{
background-color: blue;
}
div{
margin: 20px auto;
width: 156px;
height: 56px;
border-radius: 28px;
overflow: hidden;
background-color: #000;
/*position: relative; */
/*父元素加 position: relative; 圆角元素不能隐藏*/
}
div > span{
display: block;
width: 300px;
height: 56px;
background-color: red;
/*-webkit-transform: translateX(0px);*/
/*子元素加 transform 圆角元素不能隐藏*/
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>
添加评论
关注(0)
相关推荐
5. **父元素限制**：如果父元素的`overflow`属性设置为`hidden`或`scroll`，可能会裁剪掉子元素的圆角。可以尝试调整父元素的`overflow`设置，或者将圆角应用到父元素。 ```css .parent { overflow: visible; /* ...
虽然在大部分情况下`border-radius`对网页性能的影响较小，但是在一些特殊场景下，比如当页面中存在大量的圆角元素时，或者在性能较低的设备上运行时，可能会对渲染性能造成一定的负担。因此，在使用`border-radius`...
在前端开发领域，CSS3 的 `border-radius` 属性是一个非常重要的工具，它允许我们为元素添加圆角，使得设计更具吸引力和现代感。然而，"border-radius 移动之伤"这一主题揭示了在移动设备上使用 `border-radius` 时...
除了`border-radius`，还可以结合`overflow`属性来确保内容不会溢出圆角边界，保持元素的形状。例如： ```css 元素选择器 { overflow: hidden; border-radius: 10px; } ``` 如果需要在低版本的IE浏览器中实现...
总结来说，圆角边框是现代Web设计中不可或缺的一部分，它通过CSS3的`border-radius`属性轻松实现。在实际应用中，我们需要关注兼容性、背景处理、内容溢出以及响应式设计等问题，以确保圆角边框的美观和功能性。在...
老版本的Internet Explorer（IE8及以下）不支持`border-radius`，但可以通过使用特定的私有属性如`-webkit-border-radius`、`-moz-border-radius`和`-ms-border-radius`来提供部分兼容性。 5. 避免内容溢出：有时，...
此外，当元素的`overflow`属性被设置为`hidden`时，带有圆角的边框会隐藏超出边界的元素内容，这对于创建自定义形状的元素非常有用。同时，圆角效果也可以应用于背景图片，使得图片的显示更为自然。 总之，CSS3的`...
本篇将深入探讨如何利用CSS来实现尖角和圆角效果，并将这两种效果巧妙地结合在同一个元素上，以实现具有独特视觉吸引力的设计。 首先，我们来了解一下CSS中的圆角属性。CSS3引入了`border-radius`属性，它允许我们...
对于背景色的圆角处理，由于背景色跟随元素的形状，所以一旦设置了`border-radius`，背景颜色也会自动呈现相应的圆角。 接下来是图片的圆角处理。使用CSS的`border-radius`同样可以实现，但需要注意的是，如果图片...
CSS3引入了`border-radius`属性，它允许我们为元素的每个角落设定不同的圆角半径。例如，如果我们有一个`<img>`标签，我们可以设置其`border-radius`来让图片显示为圆形或椭圆形的角： ```css img { border-radius...
另外，需要注意的是，当元素的`overflow`属性设置为`hidden`时，圆角会被正确渲染。如果内容溢出元素边界，可能会导致圆角效果被破坏。因此，为了保持圆角的完整性，可以添加`overflow: hidden;`到CSS规则中。 对于...
在JavaScript中实现“圆角”效果，主要是通过CSS3的border-radius属性来完成，但在一些老版本的浏览器中，可能不支持此特性。因此，为了实现兼容性，我们需要结合JavaScript来辅助处理。以下是一个关于使用...
例如，将`overflow`设置为`hidden`，可以隐藏超出元素边框的部分内容，保持圆角的视觉效果。 另外，CSS3还引入了`box-shadow`属性，可以为元素添加阴影效果，即使元素本身没有背景色，也可以创造出类似图片圆角的...
首先，圆角效果的实现得益于CSS3的引入，通过`border-radius`属性，我们可以轻松地让元素的边角变得圆润。例如，若要将一个div元素的四个角都设置为50像素的圆角，可以这样写： ```css div { border-radius: 50px;...
通过理解和掌握`border-radius`属性，开发者可以为网页元素创建美观的圆角效果，提升用户体验。同时，配合实例文件的学习，可以帮助开发者更深入地了解这一技术，并将其应用于实际的网页设计中。
这个属性允许我们为元素的边框设置圆角，从而让元素呈现出圆形或椭圆形的外观。对于图片而言，我们可以将此属性应用到`<img>`标签上，以改变图片的四角形状。 例如，如果你希望图片的四个角都变成半径为10像素的...
综上所述，"【转载】CSS圆角化图片（三）"可能涵盖的教程内容包括但不限于`border-radius`的基本用法、百分比值的应用、浏览器兼容性处理以及与其他CSS属性的结合使用。学习这些技术，可以帮助开发者在创建现代网页...
首先，我们需要了解CSS3提供了`border-radius`属性来实现元素的圆角效果，但在某些不支持CSS3的老版本浏览器中，我们需要借助JavaScript来达到相同的目的。以下是一种常见的JavaScript实现圆角的方法： 1. **CSS...
- `border-top-left-radius` 和 `border-top-right-radius`：分别设置上边框的左上角和右上角的圆角半径。 - `border-image`：使用图像创建边框，包含`border-image-source`（图像源）、`border-image-slice`（切割...