Question

我正在创建一个网站，但我在转换中有问题（我的CSS和我的HTML）

＆＃13;

.part1			{
	background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
	background-attachment:fixed;
	position:relative;
	top:185px;
	font-family:Yu Gothic UI Light;
	font-size:110%;
	width:100%;
	height:500px;
	text-align:right;
	padding-right:5%;
	padding-left:50%;
	vertical-align:center;
	box-sizing: border-box;
	border-radius:30;
	-webkit-border-radius:30;
	-moz-border-radius:30;
	-o-border-radius:30;
	-ms-border-radius:30;
	 -webkit-transition: -webkit-transform 2s ease-in-out; 
	 -moz-transition: -moz-transform 2s ease-in-out; 
	 -o-transition: -o-transform 2s ease-in-out;
	 transition: transform 2s ease-in-out;
	 -webkit-transition:font-size 0.5s ease-in-out; 
	 -moz-transition:font-size 0.5s ease-in-out; 
	 -o-transition:font-size 0.5s ease-in-out;
	 transition:font-size 0.5s ease-in-out;

}
.part1:hover		{

	font-size:130%;
	-moz-box-shadow: 4px 4px 10px #888;  
	-webkit-box-shadow: 4px 4px 10px #888;  
	box-shadow:4px 4px 6px #888;
	-moz-border-radius: 15px;
	-webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
	-webkit-transform: scale(1.05); 
	-moz-transform: scale(1.05); 
	-o-transform: scale(1.05); 
	transform: scale(1.05);
}

＆＃13;

<div class="part1">
<p>Nous créons des sites internet pour vous, rapidement et facilement. Pour <span class="blogs">une utilisation personnelle (blogs)</span> ou <span class="official">professionnelle (site officiel de l’entreprise avec un magasin en ligne)</span>, nous vous proposons des services.</p>
</div>

＆＃13;

当鼠标移动到区域时，为什么转换不会启动＆＃34; part1＆＃34; ？为什么半径在Chrome中不起作用，但在Edge中工作！

Answer 1

对于半径，您忘记在border-radius之后添加px单位。这是正确的代码：

.part1          {
    background-image:url(https://zupimages.net/up/18/14/49pg.jpg);
    background-attachment:fixed;
    position:relative;
    top:185px;
    font-family:Yu Gothic UI Light;
    font-size:110%;
    width:100%;
    height:500px;
    text-align:right;
    padding-right:5%;
    padding-left:50%;
    vertical-align:center;
    box-sizing: border-box;
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -o-border-radius:30px;
    -ms-border-radius:30px;
     -webkit-transition: -webkit-transform 2s ease-in-out; 
     -moz-transition: -moz-transform 2s ease-in-out; 
     -o-transition: -o-transform 2s ease-in-out;
     transition: transform 2s ease-in-out;
     -webkit-transition:font-size 0.5s ease-in-out; 
     -moz-transition:font-size 0.5s ease-in-out; 
     -o-transition:font-size 0.5s ease-in-out;
     transition:font-size 0.5s ease-in-out;

}
.part1:hover        {

    font-size:130%;
    -moz-box-shadow: 4px 4px 10px #888;  
    -webkit-box-shadow: 4px 4px 10px #888;  
    box-shadow:4px 4px 6px #888;
    -moz-border-radius: 15px;
    -webkit-transition: -webkit-box-shadow 0.5s, border 0.5s, -webkit-transform 0.5s ease-in-out;
    -webkit-transform: scale(1.05); 
    -moz-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    transform: scale(1.05);
}

当鼠标移动到该区域时，转换不会启动

1 个答案: