圖片transform其父級的border-radius失效

阿新 • • 發佈：2019-01-16

最近在做一個專案的時候，遇到這樣一個bug! 仔細看圖的圓角部分。

不難發現在中間圖片放大的過程裡，父級div的border-radius出現的短暫的失效。（此bug我在火狐裡面沒有看到。在chorme瀏覽器下面。）後來群裡的一個網友給了我答案！

加上：transform: rotate(0deg);-webkit-transform:rotate(0deg);

看上去是八竿子打不著的屬性，加到程式碼裡面沒想到就生效了！！！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Szy1000</title>
	<style>
		body{
			background: blue;
		}
		.scale{
			width: 300px;
			height: 200px;
			overflow: hidden;
			border-radius: 10px;
			transform: rotate(0deg);
			-webkit-transform:rotate(0deg);
		}
		.scale img{
			height: 100%;
			transition: 500ms;
		}
		.scale:hover img{
			transform: scale(1.2);
		}
	</style>
</head>
<body>
	<div class="scale">
		<img src="1.jpg" alt="">
	</div>
</body>
</html>

-----------------------------------------------我是不完美的分割線------------------------------------------------------

方法二：mask-image()

首先，我們需要準備一張帶有圓角的png圖片。注意圓角的角度。我這裡是建一個寬300px高 200px 圓角10px。填充部分跟你是黑色還白色這裡無需關心。當然在svg遮罩裡面的時候就需要注意了。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Szy1000</title>
	<style>
		body{
			background: blue;
		}
		.scale{
			width: 300px;
			height: 200px;
			overflow: hidden;
			border-radius: 10px;
			mask-image: url("mask.png");
			-webkit-mask-image:url("mask.png");
		}
		.scale img{
			height: 100%;
			transition: 500ms;
		}
		.scale:hover img{
			transform: scale(1.2);
		}
	</style>
</head>
<body>
	<div class="scale">
		<img src="1.jpg" alt="">
	</div>
</body>
</html>

第二種方法其實就是遮罩。它在火狐上面的相容性，還有待考證。只有-webkit-mask-image:url("mask.png") 沒有其它的字首了。關於-mask-image敬請期待下一篇部落格。

最後附上原始碼供大家下載。

謝謝！

圖片transform其父級的border-radius失效

最近在做一個專案的時候，遇到這樣一個bug! 仔細看圖的圓角部分。不難發現在中間圖片放大的過程裡，父級div的border-radius出現的短暫的失效。（此bug我在火狐裡面沒有看到。在chorme瀏覽器下面。）後來群裡的一個網友給了我答案！加上：transform

transform導致的border-radius，overflow:hidden失效問題

寫一個移動端的鏡面過光效果的動畫時遇到的一個問題，在父元素設定了border-radius屬性，在overflow:hidden的時候鏡面裡的過光效果，沒有被裁剪掉，導致應該隱藏的地方溢位，後來發現可

把圖片亮度降低之後border-radius就不起作用了的解決辦法

css中給圖片亮度降低之後，border-radius再給圖片新增圓角的話，就不起作用了如： <img src="#" /> 這個時候，就需要在image標籤外面套一層div，在div上面降低暗度，這樣圓角就有效果了，如： <style> .c

safari瀏覽器 border-radius失效之填坑

safari瀏覽器不愧是下一個ie（當然，不可否認ie有它自己的問題）……有些網頁特效在chrome ie opera firefox上都跑的好好地，safari就是不行……本來要實現的特效是這樣的，外框套內框套圖片，最內側圖片會緩慢移動，很簡單對吧。chrome、ie、f

解決邊框顏色漸變時，border-radius失效的問題

<span class="price_f"><span class="price_f1">￥183</span></span> .price_f{display: inline-block;width:55px;heigh

css3基礎 border-radius:50% div 圓形顯示的圖片

思考 src over css .cn chrome mage tps ima 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css3基礎 border-radius:50% img 圓形顯示的圖片

name sch img radius tle utf tps color type 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

設定了border-radius的元素overflow:hidden失效解決方法

父元素設定圓角、overflow:hidden之後，當子元素中設定了transform後，父元素的overflow:hidden在圓角的地方失效了，解決方法：父元素加：position:relative; z-index:1; 就可以了 demo程式碼如下： <!D

css3邊框——圓角效果(border-radius)、陰影(box-shadow)、邊框應用圖片(border-image)

1.圓角效果（border-radius） border-radius是向元素新增圓角邊框使用方法如下：注：下面4個div分別實現了不同的圓角效果 <!DOCTYPE html> <html> <head> <meta chars

CSS3屬性之圓角效果——border-radius屬性

20px con 一半正方 ace ring css key lpad 在css3之前，要實現圓角的效果可以通過圖片或者用margin屬性實現(可以參考這裏：http://www.hicss.net/css-practise-of-image-round-box/)。

border-radius

最大值 round str 水平 jpg 100% lan .cn color border-radius設置 1. 水平和垂直方向的值保持一致：左上角右上角右下角左下角 2. 水平和垂直方向的值分開，中間用/分開：(水平方向)左上角右上角右下角左下角/(垂直方

關於table邊框，設置了border-collapse:collapse之後，設置border-radius沒效果

tle rate -c table tr ddd eight lap lang 重新做項目遇到邊框需要設置圓角，然後發現在設置了border-collapse:collapse之後，border-radius:10px不起作用了，發現這個是css本身的問題，兩者不能混在一

css3基礎 border-radius 圓角的div

head back 博文添加 doctype over nth 圖片 auth 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

IE8兼容border-radius

pos flow 裝飾 test black clas relative ref net 通過 Can I Use ? 兼容性查詢可以了解到IE8是不支持border-radius屬性的，導致IE8下所有圓角都被打回了原形...很方罒ω罒通過下載PIE.htc（下載）並

CSS3-邊框（border-radius、box-shadow、border-image）

第一個 ado inset 右上角 OS 是否 col 允許 -a CSS3中的邊框屬性：border-radius、box-shadow、border-image 圓角：border-radius 使用 CSS3 border-radius 屬性，你可以給任何元素制作 "

邊框的使用，border-radius，box-shadow，border-image

ext alt HA AR wid solid body -i text <html> <head> <meta charset="UTF-8"> <title></title>

border-radius:50%和100%的區別

高度 png 成了 100% 規則 tput put http mage border-radius 值類型-百分比　border-radius的值是百分比的話，就相當於盒子的寬度和高度的百分比。　我們知道在一個正方形內做一個面積最大的圓形，這個圓的半徑就為正方形邊長的

CSS漸變色邊框，解決border設定漸變後，border-radius無效的問題

需求：用css設定漸變邊框通過border-image來實現漸變色邊框 <div class="content"></div> .content { width: 100px; height: 100px; border:10px

CSS3 border-radius詳解

有兩種方法設定元素的各個拐角 1.使用邊界半徑的所對應的各個展開式屬性，分別設定四個拐角。邊框左上角半徑左上角邊框右上角半徑右上角邊框左下角半徑左下角邊框右下角半徑右下角 2.使用邊界半徑簡寫屬性，從左上角開始以順時針順序應用到元素的各個拐角。 borde

border-radius的八個值如何一一對應？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

圖片transform其父級的border-radius失效

相關推薦